JS概念理解(一)——函数和对象、原型链、_proto_

原创 2017年07月21日 20:43:15

        最近发现自己JS的基础不太好,于是通过看书和大神的博客,通过自己的理解将一些难懂的概念在此总结:

        1.函数和对象的关系:

        在JavaScript中一切对象都是通过函数创建的,某些情况下的写法实际上是一种语法糖:

var a = {b : 20, c: 30};
var arr = [ 5 , "as", true];
//可以写成
var a = new Object();
a.b = 20;
a.c = 30;

var arr = new Array();
arr[0] = 5;
arr[1] = "as";
arr[2] = true;
        上面这两种写法实际上可以互相替换,我们经常使用的上面这种写法,因为更加简便,可读性更高,但是我们需要明白它们实际上也是通过函数创建的。

        2.Prototype原型链:

        在Java这类强类型语言当中,类在被创建好之后不允许再次添加其中的方法和属性,就像是盖印章,盖下去是什么就没法改变了。而在JavaScript中,由于它是弱类型语言,可以随时在程序中改变类中的方法和属性。

var aa = {a:10 , b:true};
console.log(aa.toString());   //结果:[object Object]
var bb = [ 10,20];
console.log(bb.toString());   //结果:10,20
        从上面的代码段可以看出来,由于它们的对象类型不同,结果也大不一样,是Array对象对Array.prototype.toString()进行了重载。

        如果我们想实现重载,也很简单只需要在继承的子类的prototype中修改父类的方法就可以了,因为原型链是一个链式结构,当子类需要一个方法时他总是会先去找自己的类中有没有该方法,如果没有在去父类中寻找。

function People() {
    this.name = "srk";
    this.age = 100;
}
People.prototype.speak = function () {
    console.log("hello person");
};

function Student() {}
Student.prototype = new People();   //实现继承
Student.prototype.speak = function () {
    console.log("hello student");
};
var p1 = new People();
var p2 = new Student();
p1.speak();//hello person
p2.speak(); //hello student
最后再放一幅图,很能说明JS原型链继承的特点:


        3._proto_隐式原型

        每个对象都拥有一个隐藏属性_proto_,该属性引用了创建这个对象的函数的prototype,还用上个例子的代码来说的话,p1._proto_ === People.prototype,关系如图所示:

        在这个图当中,o1的_proto_指向了Object.prototype,因为它实际上就是一个Object对象,然而Object.prototype也拥有一个_proto_属性,这个值为null。总而言之就是:对象的_proto_指向创建它的函数的prototype。

JS原型与原型链终极详解_proto_、prototype及constructor

一. 普通对象与函数对象   JavaScript 中,万物皆对象!但对象也是有区别的。分为普通对象和函数对象,Object ,Function 是JS自带的函数对象。下面举例说明  functio...
  • bluesky1215
  • bluesky1215
  • 2017年02月06日 11:27
  • 826

javascript中的对象详解,以及对象和原型链

除了5种基本类型外,JS中剩下的就是对象 (1)对象的定义:直接定义:var test={x:1,y:1}new方式创建:var test=new Object({x:1})Object.create...
  • liwusen
  • liwusen
  • 2016年06月11日 21:13
  • 1212

深入javascript面向对象,js的原型链、继承

进阶面向对象——————————————————————–在JS源码中,系统对象也是基于原型的程序, 尽量不要去添加和修改系统对象的方法 包装对象——————————————————————–基本类型...
  • u014420383
  • u014420383
  • 2015年08月15日 08:57
  • 1257

彻底深刻理解js原型链之prototype,__proto__以及constructor(一)

原文地址:http://www.0313.name/2017/01/13/prototype-proto-constructor.html前言 以下概念请花费一定的时间彻底理解,才能进行下一步,思...
  • zhangliuxiaomin
  • zhangliuxiaomin
  • 2017年01月19日 18:14
  • 875

图解js原型对象、原型链

在Javascript中,万物皆对象,所以想要理解原型对象和原型链,我们首先要对对象有深刻的理解,JS中对象大致可以分为两类,即:普通对象Object 和 函数对象Function。一般而言,通过ne...
  • dovlie
  • dovlie
  • 2017年07月28日 10:09
  • 202

JavaScript概念总结:作用域、闭包、对象与原型链

1 JavaScript变量作用域 1.1 函数作用域 没有块作用域:即作用域不是以{}包围的,其作用域完成由函数来决定,因而if /for等语句中的花括号不是独立的作用域。 如前述,JS的在函...
  • zzulp
  • zzulp
  • 2012年11月03日 20:49
  • 17699

原型链的从对象创建到原理详解

js原型与原型链终极详解一、在javascript中没有所谓的空对象,即使最简单的{}也具有从Object.prototype继承的方法和属性。二、创建的对象的俩种等价的方法:使用字面量方法创建对象:...
  • GuiQiSS
  • GuiQiSS
  • 2016年12月21日 11:11
  • 850

深入理解JS继承和原型链

对于那些熟悉基于类的面向对象语言(Java 或者 C++)的开发者来说,JavaScript 的语法是比较怪异的,这是由于 JavaScript 是一门动态语言,而且它没有类的概念( ES6 新增了...
  • zls986992484
  • zls986992484
  • 2016年12月17日 11:18
  • 3007

原型和原型链,作用域链区别

原型和原型链,作用域链区别: 在JavaScript中,一共有两种类型的值,原始值和对象值.每个对象都有一个内部属性[[prototype]],我们通常称之为原型.原型的值可以是一个对象,也可以...
  • nideshijian
  • nideshijian
  • 2016年10月13日 15:56
  • 3084

彻底理解javascript中的原型链

要弄清楚原型链就要先弄清楚 function 类型,在javascript中没有类的概念,都是函数,所以它是一门函数式的编程语言。类有一个很重要的特性,就是它可以根据它的构造函数来创建以它为模板的对象...
  • ljl157011
  • ljl157011
  • 2014年02月22日 13:38
  • 12502
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS概念理解(一)——函数和对象、原型链、_proto_
举报原因:
原因补充:

(最多只允许输入30个字)