奥门威尼斯网址:JavaScript深入之从原型到原型链

by admin on 2019年11月19日

JavaScript 深入之从原型到原型链

2017/05/04 · JavaScript
· 原型,
原型链

原文出处: 冴羽   

转载自:冴羽JavaScript深入之从原型到原型链

已离开简书,原因参见
http://www.jianshu.com/p/0f12350a6b66。

在JS中,原型链是一个重要的概念,不管是继承还是属性值的查找中,都用到了原型链的基本知识,有些朋友经常问我一些关于原型链的问题,今天整理一下自己对原型链的理解,下次我就不用在去解释了,直接看文章。

构造函数创建对象

我们先使用构造函数创建一个对象:

function Person() { } var person = new Person(); person.name = ‘name’;
console.log(person.name) // name

1
2
3
4
5
6
function Person() {
 
}
var person = new Person();
person.name = ‘name’;
console.log(person.name) // name

在这个例子中,Person就是一个构造函数,我们使用new创建了一个实例对象person。

很简单吧,接下来进入正题:

摘要理解:

虽人微言轻,但也要有自己的态度。

首先,大家都知道在JS中有六种基本数据类型和一种复杂类型
六种基本数据类型:

prototype

每个函数都有一个prototype属性,就是我们经常在各种例子中看到的那个prototype,比如:

function Person() { } // 虽然写在注释里,但是你要注意: //
prototype是函数才会有的属性 Person.prototype.name = ‘name’; var person1
= new Person(); var person2 = new Person(); console.log(person1.name) //
name console.log(person2.name) // name

1
2
3
4
5
6
7
8
9
10
function Person() {
 
}
// 虽然写在注释里,但是你要注意:
// prototype是函数才会有的属性
Person.prototype.name = ‘name’;
var person1 = new Person();
var person2 = new Person();
console.log(person1.name) // name
console.log(person2.name) // name

那这个函数的prototype属性到底指向的是什么呢?是这个函数的原型吗?

其实,函数的prototype属性指向了一个对象,这个对象正是调用该构造函数而创建的实例的原型,也就是这个例子中的person1和person2的原型。

那么什么是原型呢?你可以这样理解:每一个JavaScript对象(null除外)在创建的时候就会与之关联另一个对象,这个对象就是我们所说的原型,每一个对象都会从原型”继承”属性。

让我们用一张图表示构造函数和实例原型之间的关系:

奥门威尼斯网址 1

在这张图中我们用Object.prototype表示实例原型

那么我们该怎么表示实例与实例原型,也就是person和Person.prototype之间的关系呢,这时候我们就要讲到第二个属性:

prototype:

每个函数都有一个 prototype 属性,就是我们经常在各种例子中看到的那个
prototype

function Person() {

}
// 虽然写在注释里,但是你要注意:
// prototype是函数才会有的属性
Person.prototype.name = 'Kevin';
var person1 = new Person();
var person2 = new Person();
console.log(person1.name) // Kevin
console.log(person2.name) // Kevin

那什么是原型呢?你可以这样理解:每一个JavaScript对象(null除外)在创建的时候就会与之关联另一个对象,这个对象就是我们所说的原型,每一个对象都会从原型”继承”属性。

文章可以在我的 Github
https://github.com/mqyqingfeng/Blog
查看

  1. String
  2. Number
  3. Boolean
  4. null
  5. undefined
  6. Symbol(ES2015新加入,解决属性名的冲突问题。详情)

__proto__

这是每一个JavaScript对象(除了null)都具有的一个属性,叫__proto__,这个属性会指向该对象的原型。

为了证明这一点,我们可以在火狐或者谷歌中输入:

function Person() { } var person = new Person();
console.log(person.__proto__ === Person.prototype); //true

1
2
3
4
5
function Person() {
 
}
var person = new Person();
console.log(person.__proto__ === Person.prototype); //true

于是我们更新下关系图:

奥门威尼斯网址 2

既然实例对象和构造函数都可以指向原型,那么原型是否有属性指向构造函数或者实例呢?

__proto + __

这是每一个JavaScript对象(除了 null
)都具有的一个属性,叫proto,这个属性会指向该对象的原型。
为了证明这一点,我们可以在火狐或者谷歌中输入:

function Person() {

}
var person = new Person();
console.log(person.__proto__ === Person.prototype); // true

既然实例对象和构造函数都可以指向原型,那么原型是否有属性指向构造函数或者实例呢?

另外一种复杂类型自然而然就是Object,有的人也说JS中一切皆是对象。上面的六种基本数据类型中,除了null和undefined没有构造函数外,其他4种都对应有其构造函数对象,有时利用这些构造函数可以强制转换数据类型。

constructor

指向实例倒是没有,因为一个构造函数可以生成多个实例,但是原型指向构造函数倒是有的,这就要讲到第三个属性:construcotr,每个原型都有一个constructor属性指向关联的构造函数

为了验证这一点,我们可以尝试:

function Person() { } console.log(Person ===
Person.prototype.constructor); //true

1
2
3
4
function Person() {
 
}
console.log(Person === Person.prototype.constructor); //true

所以再更新下关系图:

奥门威尼斯网址 3

综上我们已经得出:

function Person() { } var person = new Person();
console.log(person.__proto__ == Person.prototype) // true
console.log(Person.prototype.constructor == Person) // true //
顺便学习一个ES5的方法,可以获得对象的原型
console.log(Object.getPrototypeOf(person) === Person.prototype) //true

1
2
3
4
5
6
7
8
9
function Person() {
}
 
var person = new Person();
 
console.log(person.__proto__ == Person.prototype) // true
console.log(Person.prototype.constructor == Person) // true
// 顺便学习一个ES5的方法,可以获得对象的原型
console.log(Object.getPrototypeOf(person) === Person.prototype) //true

了解了构造函数、实例原型、和实例之间的关系,接下来我们讲讲实例和原型的关系:

constructor

指向实例倒是没有,因为一个构造函数可以生成多个实例,但是原型指向构造函数倒是有的,这就要讲到第三个属性:constructor,每个原型都有一个
constructor 属性指向关联的构造函数。

为了验证这一点,我们可以尝试:

function Person() {

}
console.log(Person === Person.prototype.constructor); // true

综上我们已经得出:

function Person() {

}

var person = new Person();

console.log(person.__proto__ == Person.prototype) // true
console.log(Person.prototype.constructor == Person) // true
// 顺便学习一个ES5的方法,可以获得对象的原型
console.log(Object.getPrototypeOf(person) === Person.prototype) // true

要想讲清楚原型链的一些问题,还有一个特殊的Object对象必须事先说清楚,那就是Function对象。它也是对象,只不过比其他普通对象复杂点罢了。

实例与原型

当读取实例的属性时,如果找不到,就会查找与对象关联的原型中的属性,如果还查不到,就去找原型的原型,一直找到最顶层为止。

举个例子:

function Person() { } Person.prototype.name = ‘name’; var person = new
Person(); person.name = ‘name of this person’; console.log(person.name)
// name of this person delete person.name; console.log(person.name) //
name

1
2
3
4
5
6
7
8
9
10
11
12
13
function Person() {
 
}
 
Person.prototype.name = ‘name’;
 
var person = new Person();
 
person.name = ‘name of this person’;
console.log(person.name) // name of this person
 
delete person.name;
console.log(person.name) // name

在这个例子中,我们设置了person的name属性,所以我们可以读取到为’name of
this

实例与原型:

当读取实例的属性时,如果找不到,就会查找与对象关联的原型中的属性,如果还查不到,就去找原型的原型,一直找到最顶层为止。

举个例子:

function Person() {

}

Person.prototype.name = 'Kevin';

var person = new Person();

person.name = 'Daisy';
console.log(person.name) // Daisy

delete person.name;
console.log(person.name) // Kevin

在这个例子中,我们给实例对象 person 添加了 name 属性,当我们打印
person.name 的时候,结果自然为 Daisy。

但是当我们删除了 person 的 name 属性时,读取 person.name,从 person
对象中找不到 name 属性就会从 person 的原型也就是 person.proto
,也就是 Person.prototype中查找,幸运的是我们找到了 name 属性,结果为
Kevin。

但是万一还没有找到呢?原型的原型又是什么呢?

组合继承

首先我们先写一个大家熟悉的组合继承(原型链+构造函数),然后根据这个组合继承去了解原型链到底是怎样连接起来的。

//父类
function Person(name,age){
  if(this instanceof Person){
    this.name = name;
    this.age = age;
  }else {
    Person.call(this,name,age);
  }
}

Person.prototype.say = function(){
  console.log('我叫' + this.name +',今年' + this.age + '岁了!')
}

//子类
function Student(name,age,gride){
  if(this instanceof Student){
    Person.call(this,name,age);
    this.gride = gride;
  }else {
    Student.call(this,name,age,gride);
  }
}

Student.prototype = new Person();
Student.prototype.constructor = Student;

Student.prototype.say = function(){
  console.log('我叫' + this.name +',今年' + this.age + '岁了,考试考了' + this.gride + '分!');
}

var stu = new Student('chping',23,100);
stu.say();

此时会输出我叫chping,今年23岁了,考试考了100分!,这说明我们的组合继承就实现了,下面可以根据这个例子逐句解释一下原型链的相关问题,顺便讲解这个组合继承了。

person’,当我们删除了person的name属性时,读取person.name,从person中找不到就会从person的原型也就是person.__proto__

Person.prototype中查找,幸运的是我们找到了为’name’,但是万一还没有找到呢?原型的原型又是什么呢?

在前面,我们已经讲了原型也是一个对象,既然是对象,我们就可以用最原始的方式创建它,那就是

var obj = new Object(); obj.name = ‘name’ console.log(obj.name) // name

1
2
3
var obj = new Object();
obj.name = ‘name’
console.log(obj.name) // name

所以原型对象是通过Object构造函数生成的,结合之前所讲,实例的__proto__指向构造函数的prototype,所以我们再更新下关系图:

奥门威尼斯网址 4

原型的原型:

在前面,我们已经讲了原型也是一个对象,既然是对象,我们就可以用最原始的方式创建它,那就是:

var obj = new Object();
obj.name = 'Kevin'
console.log(obj.name) // Kevin

第一个问题:安全使用构造函数

首先可能你对PersonStudent里面的那个判断有些疑问,你可能是下面这样写构造函数:

function Person(name,age){
   this.name = name;
   this.age = age;
}

不这样写,主要是防止构造函数被执行,因为一旦构造函数执行,其内的属性值会被挂载到window上面去了(当构造函数执行的时候,里面的this是指向window的)。

好的,这个问题解决了,在看第二个问题。

原型链

那Object.prototype的原型呢?

null,嗯,就是null,所以查到Object.prototype就可以停止查找了

所以最后一张关系图就是

奥门威尼斯网址 5

顺便还要说一下,图中由相互关联的原型组成的链状结构就是原型链,也就是蓝色的这条线。

原型链:

那 Object.prototype 的原型呢?

null,我们可以打印:

console.log(Object.prototype.__proto__ === null) // true

所以 Object.prototype.proto 的值为 null 跟 Object.prototype
没有原型,其实表达了一个意思。

所以查找属性的时候查到 Object.prototype 就可以停止查找了。

最后一张关系图也可以更新为:

奥门威尼斯网址 6

image.png

顺便还要说一下,图中由相互关联的原型组成的链状结构就是原型链,也就是蓝色的这条线。

第二个问题:prototype对象

接着我们来体会一下下面这句话:

每一个函数对象都有一个prototype属性,该属性指向其prototype对象

这句话相信你已经听了很多遍了,可能并不是这样说的,但是就是这么个意思。那么这句话应该怎么理解呢?

其实也不难,先看前半部分每一个函数对象都有一个prototype属性。这半句就是说函数对象默认有一个属性,这个属性叫prototype。另外,函数对象就是指用function声明的对象(补充一下:在ES2015之前,有两种声明变量的方式,function用来声明函数变量,var
用来声明普通变量。但是在ES2015中新加了letconst)。

再看一下后半部分该属性指向其prototype对象。后半句的意思就是说prototype属性指向的是一个也叫prototype的对象,该对象是随着函数对象而产生的。也就是说,只要通过function定义一个函数对象,就会生成一个prototype对象,并在函数上生成一个prototype属性来指向该prototype属性。用图来表示一下就是下面的样子:

奥门威尼斯网址 7

构造函数与其prototype对象

;

从图中(此图很丑,欢迎投稿:))你可以看到还有一个知识点,就是prototype对象中还有一个constructor对象,该对象又指向了构造函数,这也是一个需要注意的知识点,后面我们在展开来说,这里先记一下。

通过上面的这句话,我们可以联想到,Object好像也是一个构造函数,Function好像也是一个函数,他们是不是也是这样的呢?回答是肯定的,他们也是这样的。如下图:

奥门威尼斯网址 8

Object的构造函数与其prototype对象

;

奥门威尼斯网址 9

Function的构造函数与其prototype对象

;

补充

最后,补充和纠正本文中一些不严谨的地方:

首先是constructor,

function Person() { } var person = new Person();
console.log(person.constructor === Person); // true

1
2
3
4
5
function Person() {
 
}
var person = new Person();
console.log(person.constructor === Person); // true

当获取person.constructor时,其实person中并没有constructor属性,当不能读取到constructor属性时,会从person的原型也就是Person.prototype中读取,正好原型中有该属性,所以

person.constructor === Person.prototype.constructor

1
person.constructor === Person.prototype.constructor

其次是__proto__,
绝大部分浏览器都支持这个非标准的方法访问原型,然而它并不存在与Person.prototype中,实际上,它是来自于Object.prototype,与其说是一个属性,不如说是一个getter/setter,当使用obj.__proto__时,可以理解成返回了Object.getPrototypeOf(obj)

最后是关于继承,前面我们讲到“每一个对象都会从原型”继承”属性”,实际上,继承是一个十分具有迷惑性的说法,引用《你不知道的JavaScript》中的话,就是:继承意味着复制操作,然而JavaScript默认并不会复制对象的属性,相反,JavaScript只是在两个对象之间创建一个关联,这样,一个对象就可以通过委托访问另一个对象的属性和函数,所以与其叫继承,委托的说法反而更准确些。

补充

最后,补充三点大家可能不会注意的地方:

第三个问题:__proto__属性

先说明一下,__proto__的写法是前后各两个英文输入法下的下划线,不是一个。
然后我们再来看这样一句话:

每一个对象都有一个__protto__属性,该属性指向创建这个对象的构造函数的prototype对象

这句话稍微有点绕,我再来解释一下这句话。这句话的前半部分比较好理解,就是说JS中的每一个对象都有一个属性,这个属性的名字叫做__proto__,还要再说的话,就是注意JS中一切皆是对象这句话。

这句话后半部分有点绕,我们把它分成两句话去理解:

  1. 创建这个对象的构造函数
  2. 的prototype对象

这样就明白了,但是创建这个对象的构造函数怎么确定呢?这是个问题,不好解释,我也解释不好。就总结一下:

  1. function定义的函数对象的__proto__属性指向Function对象的prototype对象
  2. 非function定义的对象的__proto__属性指向创建它的构造函数的prototype对象。(就是都指向Object的prototype对象)
  3. Object的prototype对象的__proto__指向null

还是看图吧:

奥门威尼斯网址 10

对象的__proto__属性

;

相信通过图你已经看懂了__proto__属性的指向问题了。

深入系列

JavaScript深入系列预计写十五篇左右,旨在帮大家捋顺JavaScript底层知识,重点讲解如原型、作用域、执行上下文、变量对象、this、闭包、按值传递、call、apply、bind、new、继承等难点概念,与罗列它们的用法不同,这个系列更注重通过写demo,捋过程、模拟实现,结合ES规范等方法来讲解。

所有文章和demo都可以在github上找到。如果有错误或者不严谨的地方,请务必给予指正,十分感谢。如果喜欢或者有所启发,欢迎star,对作者也是一种鼓励。

1 赞 3 收藏
评论

奥门威尼斯网址 11

constructor:

首先是 constructor 属性,我们看个例子:

function Person() {

}
var person = new Person();
console.log(person.constructor === Person); // true

当获取 person.constructor 时,其实 person 中并没有 constructor
属性,当不能读取到constructor 属性时,会从 person 的原型也就是
Person.prototype 中读取,正好原型中有该属性,所以:

person.constructor === Person.prototype.constructor

思考组合继承

//父类
function Person(name,age){
  if(this instanceof Person){
    this.name = name;
    this.age = age;
  }else {
    Person.call(this,name,age);
  }
}
//上面通过function声明了一个函数对象,那么该对象的肯定有一个prototype属性,
//并且指向其prototype对象。我们可以打印验证一下

console.log(Person.prototype);
/*打印结果如下
{
  constructor: function Person(name,age)
    arguments:null
    caller:null
    length:2
    name:"Person"
    prototype:Object
    __proto__:function()  
  ,
  __proto__: Object
}
*/

这说明prototype对象就是一个空对象添加了一个constructor属性
另外,也看到了prototype对象有一个__proto__属性,指向Object,先记住。
此外,我们也看到了constructor指向的Person函数确实存在prototype属性和__proto__属性,以及其指向问题,我们同时也可以打印验证一下:

console.log(Person.prototype.constructor === Person);//true
console.log(Person.prototype.__proto__=== Object.prototype);//true
console.log(Person.__proto__=== Function.prototype);//true

我们再来验证一下ObjectFunction的prototype属性,constructor属性还有__proto__属性

console.log(Object.prototype);
console.log(Object.prototype.constructor === Object);//true
console.log(Object.prototype.__proto__ === null);//true
console.log(Object.__proto__ === Function.prototype);//true

console.log(Function.prototype);
console.log(Function.prototype.constructor === Function);//true
console.log(Function.prototype.__proto__ === Object.prototype);//true
console.log(Function.__proto__ === Function.prototype);//true

OK,相信大家对原型链有了一定了解了。我们接着往下看。

Person.prototype.say = function(){
  console.log('我叫' + this.name +',今年' + this.age + '岁了!')
}

在Person的prototype对象上添加了一个say方法,和给普通对象添加方法并没有区别,只不过在稍后使用的时候才会展现出它的与众不同。

接下来是Student类:

function Student(name,age,gride){
  if(this instanceof Student){
    Person.call(this,name,age);
    this.gride = gride;
  }else {
    Student.call(this,name,age,gride);
  }
}

在此时,Student和Person以Person.call(this,name,age);这一句代码产生了联系,此时Student仅仅是通过构造函数继承的方式调用了Person,这并不是本文重点,我们此时可以认为原型链上Student和Person并没有任何联系,让它们在原型链上产生联系的是下面这条语句。

Student.prototype = new Person();
Student.prototype.constructor = Student;

我们来想想这两条语句都干了啥?
首先我们知道,Student函数对象在被function声明的时候已经生成了其prototype对象,并且通过prototype属性建立了联系。
这里的第一条语句居然是,改变了Student函数对象的prototype属性指向,不再指向function声明时自动生成的prototype对象,而是指向Person函数对象的一个实例对象。让我们用图展示一下,就成了下面这样:

奥门威尼斯网址 12

原型链继承关键步骤图解

;

OK,原型链继承就这样实现了。但是由于我们让Student函数对象的prototype属性重新指向了一个Person函数对象的实例,而这个实例对象里面是不可能有constructor属性的,自然也不会指向Student(为什么没有呢?前面已经说了,因为只有用function声明函数对象的时候,自动生成的prototype对象中才默认有constructor属性,其他对象不会有)。

接下来就是在Student函数对象新指向的prototype对象上添加say方法:

Student.prototype.say = function(){
  console.log('我叫' + this.name +',今年' + this.age + '岁了,考试考了' + this.gride + '分!');
}

这个就没有说的必要了,就是在对象上加了一个方法,只不过这个对象有些特别罢了。然后就是通过Student构造函数来生成实例:

var stu = new Student('chping',23,100);
stu.say();

此时,我们还是要看看这两句干了啥?
先看第一句,new Student('chping',23,100);,其中我们必须先得知道关键字new做了什么:

var obj = {}
Student.call(this,'chping',23,100);
obj.__proto__ = Student.prototype;
return obj;

这样相信你就明白,第一句干的活了:

  1. 首先创建一个空对象。
  2. 将属性挂载到该空对象上。
  3. 将空对象的__proto__属性连接到Student函数对象的prototype对象上,来生成原型链。
  4. 返回该对象给stu变量。

接下来就是第二句stu.say(),这句话的意思就是stu实例对象调用say方法,但是在查找的时候发现,stu实例对象上并没有这个方法,于是原型链就来了。此时他会根据其__proto__属性来查找Student函数对象的prototype对象上有没有say方法,然后它发现正好有一个say方法,于是就可以执行该方法了。

此时又产生一个问题,在执行Student函数对象的prototype上的say方法时,里面的this指向谁呢?
可以想一下,此时say方法是被谁调用的,很明显是stu实例对象,所以this指向stu,所以,this.namethis.agethis.gride就是实例对象stu上面的chping23100了。

下面我们再来看一下完整的原型链继承的图解,如果你能完全看懂这张图,那么你对原型链的理解也就差不多了。

奥门威尼斯网址 13

原型链继承图解

;

proto

其次是 proto
,绝大部分浏览器都支持这个非标准的方法访问原型,然而它并不存在于
Person.prototype 中,实际上,它是来自于 Object.prototype
,与其说是一个属性,不如说是一个 getter/setter,当使用 obj.proto
时,可以理解成返回了 Object.getPrototypeOf(obj)。

结语

原型链的基础知识差不多通过上面这个例子就介绍完了,我们来总结一下:

  1. 每一个函数对象都有一个prototype属性,该属性指向其prototype对象
  2. 每一个对象都有一个__protto__属性,该属性指向创建这个对象的构造函数的prototype对象
  3. function定义的函数对象的proto属性指向Function对象的prototype对象
  4. 非function定义的对象的proto属性指向创建它的构造函数的prototype对。(就是都指向Object的prototype对象)
  5. Object的prototype对象的proto指向null

然后在看看下面几个常见的原型链的小题目,相信你对原型链会有一个新的认识了。

真的是继承吗?

最后是关于继承,前面我们讲到“每一个对象都会从原型‘继承’属性”,实际上,继承是一个十分具有迷惑性的说法,引用《你不知道的JavaScript》中的话,就是:
继承意味着复制操作,然而 JavaScript
默认并不会复制对象的属性,相反,JavaScript
只是在两个对象之间创建一个关联,这样,一个对象就可以通过委托访问另一个对象的属性和函数,所以与其叫继承,委托的说法反而更准确些。

PS:如果大家有什么问题,欢迎到冴羽大大的github上提ISSUE,这里只是简单的总结一下。方便查漏补缺。

第一题

function Person(){
  this.name = 1;
}
var person1 = new Person();
Person.prototype.name =2;
console.log(person1.name); 
console.log(person1.__proto__.name); 

Person.prototype = {
  name:3
}
console.log(person1.name); 
console.log(person1.__proto__.constructor);
console.log(person1.__proto__.name);

var person2 = new Person();
console.log(person2.__proto__.name); 
console.log(person2.__proto__.constructor == Object);
console.log(person2.name); 

上面的console.log会打印什么?
这个题考察的是对prototype对象的理解。

第二题

function Outer() {
  this.a = 1;
}

function Inner() {}

var outer = new Outer();
Inner.prototype = outer;
var inner = new Inner();

inner.a = inner.a + 1;

console.log(inner);
console.log(outer);

猜猜上面会是什么结果?
这个题考察的是对实例对象上属性的理解。

第三题

var animal = function(){}
var dog =function(){}
animal.price = 2000;
dog.prototype = animal;
var dd = new dog();

console.log(dog.price);
console.log(dd.price);

在分析一下这个题目的输出结果?
这个题目考察的是__proto__属性的理解。

第四题

下面放大招了,这个题目可能不完全是原型链的问题,对JS基础知识的一个综合考察,可以试一试:

var a = new Object();
a.param = 123;

function foo(){
  get = function(){
    console.log(1);
  };
  return this;
}

foo.get = function(){
  console.log(2);
};

foo.prototype.get = function(){
  console.log(3);
};

var get = function(){
  console.log(4);
};

function get(){
  console.log(5);
}

foo.get();
get();
foo().get();
get();
new foo.get();
new foo().get();
new new foo().get();

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图