明白Js原型和原型链

访客4年前 (2021-02-11)黑客资讯573

在讲原型之前我们先来领会一下函数。在 *** 中，函数的本质就是工具，它与其他工具差别的是，建立它的组织函数与建立其他工具的组织函数不一样。

那发生函数工具的组织函数是什么呢？是一个叫做Function的特殊函数，通过new Function 发生的工具就是一个函数。

function f1() {}
//上面的函数等同于：
var f1 = new Function();

function sum(a, b) {
    return a + b;
}
//上面的函数等同于：
var sum = new Function("a", "b", "return a + b");//前面的是函数形参名，最后一个参数是函数体

也就是说：只要通过Function建立的工具就是函数，函数都是通过Function建立的。

看下面这张图片：

以上我们可以看到通俗工具是由函数建立的，函数是由Function建立的。那我们会有一个疑问Function是从哪里来的？实在Function是不通过其他函数获得，它是 *** 执行引擎初始化就直接通过内陆代码直接放置到内存中的。

原型

当一个函数被建立后，这个函数就会自动附带一个属性prototype，它就是一个Object工具，代表着函数的原型。也就是说prototype就是原型工具

原型工具中包罗两个属性：constructor和__proto__。
constructor这个属性是指建立原型的函数,它指向函数自己。以是有以下关系：

隐式原型(proto)

所有的工具都包罗一个属性__proto__，它指向建立该工具的组织函数的原型。看下面这张图理清它们之间的关系：

注重：函数才有prototype，实例工具只有__proto__

我们来磨练一下自己是否明白了他们之间的关系,看以下代码：

function Person() {};
const obj1 = new Person();
const obj2 = new Person();

//两个工具的地址差别
console.log(obj1 === obj2); //false

//原型只有函数才有，obj1是通俗工具，没有原型
console.log(obj1.prototype); //undefined

//obj1和obj2都是通过Person函数建立的，它们的隐式原型都指向Person函数的原型
console.log(obj1.__proto__ === obj2.__proto__); //true

//obj1是通过Person函数建立的，它的隐式原型指向Person函数的原型
console.log(obj1.__proto__ === Person.prototype); //true

以是，由同一个函数发生的工具，它们的隐式原型，都指向函数的原型。那么函数原型中保留的器械，就可以被所有工具共享了！

既然所有的工具都有隐式原型(__proto__)，那函数也是工具，原型也是工具，它们也具有隐式原型。我们知道隐式原型指向建立该工具的组织函数的原型。而函数是有Function建立的，以是函数的隐式原型应该指向Function的原型

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

原型是通过Object建立的，以是原型工具的隐式原型指向的是Object的原型

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

那么我们又会遇到新的疑问：

Function也是工具，它的隐式原型指向谁呢？
Object的原型也是工具，它的隐式原型指向谁呢？

我们始终要记得：工具的隐式原型，始终指向建立它的组织函数的原型。

然则Function是 *** 引擎直接放置到内存的，不通过组织函数发生；Object的原型是靠Object函数建立的。 *** 对它们举行了特殊的处置：Function的隐式原型指向自身原型。Object的隐式原型指向null。

给出整个原型图：

明白完上面这些让我们来看原型链

原型链

当我们写了一个组织函数，好比Person，然后用这个组织函数建立一个工具new Person()，建立的这个工具会自动的拥有一些自身并不存在的方式。看下面这个例子：

function Person(){}

const p = new Person();

console.log(p.toString()); //输出：[object Object]

从图中，我们可以清晰的看到，箭头（隐式原型指向）将工具p、Person的原型、Object的原型串成了一根链条。我们在工具p中使用的toString方式，实际上是Object原型中的toString方式。

以上我们都可以得知：

任何一个实例工具通过原型链可以找到它对应的原型工具，原型工具上面的实例和方式都是实例所共享的。
当 *** 查找一个工具的成员时，先查找自身是否拥有该成员，若没有，则在它隐式原型形成的链条中查询该成员，查找到了则住手，否则继续查找，直到链条的终点——NULL。若都查找不到，返回undefined。

看下面这个例子：

function Person() {
    this.toString = function () {
        return "这是工具自身的toString";
    }
}

Person.prototype.toString = function () {
    return "这是工具隐式原型中的toString";
}

const p = new Person();

console.log(p.toString()); //输出：这是工具自身的toString

在这个例子中，给工具P和它的隐式原型（也就是建立p的组织函数的原型）上，都加入了toString方式， *** 查找到了p自身包罗toString，就会立刻住手查找，使用它自身的toString方式。始终记得：查找工具成员时， *** 会在链条上依次举行查找！