如何理解JavaScript中的原型和原型链

首先是一张关系图,避免抽象化理解时产生的困难

Function对象

函数对象是JavaScript学习中不可避免的一部分,并且这一部分相对重要且抽象 函数的建立方式有2种:

• 字面量建立

var foo = function(){
    console.log("test");
}

• new 关键字建立实例对象

//let 函数名 = new Function(“参数列表”,”函数体”);
let sum = new Function("num1,num2","return num1+num2");

咱们多数在使用new关键字的时候,是用于建立实例对象

那么咱们首先来看一下,在使用new关键字建立实例对象的时候,都经历了什么:

• 建立一个新对象
• 连接到原型对象,继承属性和方法
• 将构造函数的做用域赋给新对象(this指向改变到实例对象中)
• 返回新对象

这个时候咱们的关注点 原型对象 就出现了:

原型对象prototype

• prototype是一个显式原型属性(也能够叫它原型对象),只有函数才有该属性,一般咱们叫这个时候的函数为"构造函数"
• prototype的伴随构造函数的声明就会被自动建立
• 原型对象prototype只有一个属性:constructor

代码举例:

function Student(name,age){
    this.name = name;
    this.age = age;
}
let s1 = new Student("Tom",17);

首先咱们建立了一个构造函数Student,此时Student的结构中会出现一个prototype属性,即原型对象,这是引擎自动给它的,咱们能够直接进行使用

• 实例对象prototype中的constructor属性:

此时能够看出constructor对应的是构造函数,也就是Student

而且这是一个公有不可枚举属性,一旦改变了prototype,这个属性就会不见,固然能够再手动添加回去

而当咱们再使用new关键字建立实例对象s1以后,咱们来看一下s1的结构:

实例对象s1中除了在Student得到的age,name属性以外,还有一个__proto__属性,因此它又是什么东西呢?

__proto__是什么

__proto__是每一个对象都有的隐式原型属性，指向了建立该对象的构造函数的原型对象prototype,可是 prototype是内部私有属性,咱们并不能访问到,因此使用__proto__进行访问

至于__proto__是如何产生的,上面的new关键字建立函数的时候的第三部"连接到原型,继承属性和方法"的时候就让实例对象,例如s1拥有了__proto__属性

从实例对象s1的__proto__指向构造函数Student的prototype,构成了原型链

经过原型链的概念,咱们就不难理解实例对象是如何继承构造函数中原型对象的属性和方法了

function Student(name,age){
    this.name = name;
    this.age = age;
}
Student.prototype.method = function(){
    console.log("个人名字是"+this.name+",个人年龄是"+this.age);
}
let s1 = new Student("Tom",17);
s1.method();    //个人名字是Tom,个人年龄是17

函数的原型链结构

任意的一个函数, 都是至关于 Function 的实例. 相似于 {} 与 new Object() 的关系

    function foo () {};
    // 告诉解释器, 有一个对象叫 foo, 它是一个函数
    // 至关于 new Function() 获得一个 函数对象

1. 函数有 __proto__ 属性
2. 函数的构造函数是 Function
3. 函数应该继承自 Function.prototype
4. Fucntion.prototype 继承自 Object.protoype
5. 构造函数有prototype, 实例对象才有__proto__指向原型, 构造函数的原型才有 constructor 指向构造函数

intanceof

array instanceof Array判断 构造函数 Array 的原型 是否在 实例对象 array 的原型链存在