进击的 JavaScript （七）之原型链

时间 2019-11-08

原文原文链接

首先说一下，函数建立的相关知识

在JavaScript中，咱们建立一个函数A(就是声明一个函数), 那么 js引擎 就会用构造函数Function来建立这个函数。因此，全部的函数的constructor属性都指向 构造函数Function。A.constructor === Function; //true（函数自己并无这个属性，后面介绍。记住，这里是函数，重点，要考，哈哈）而后会在内存中建立一个原型对象B，原型对象这个东西，看不见，摸不着，只能经过函数的 prototype 来获取这个对象。( 即：prototype的属性的值是这个对象 )。浏览器

再说一下，对象建立的相关知识

对象的建立，有三种方式
一、字面量方式(又称直接量)app

啥是字面量呢？能够理解为，没用new出来的都属于字面量建立。函数

举个栗子：this

var c = {};     //c 是变量， {} 就是字面量了

字面量对象的建立过程跟函数的过程类似，当你声明一个对象字面量时，js引擎就会构造函数 Object 来建立这个对象，因此效果等同 new Object()spa

二、构造器方式prototype

这个呢，就是用 new 建立。code

栗子在此：对象

var c = new Object();

三、Object.createblog

这是个ES5中新增的方法，这个方法是建立一个新对象，把它的__proto__指向传进来的函数或者对象。究竟是怎么回事呢，下面，我们来简单实现下它的功能继承

function create(proto, options){     //proto表示传入的函数或者对象，options表示给子类添加的属性
    var obj = {};
    obj.__proto__ = proto;
    if(options == null){
        return obj;
    }
    return Object.defineProperties(obj,options);    //Object.defineProperties方法直接在一个对象上定义新的属性或修改现有属性，并返回该对象。因此这里就直接return了
    }

检验一下：

var a = function(){};

//自制的create
var b = create(a);
console.log(b.__proto__ === a);   //true;
var c = create(a.prototype);
console.log(c.__proto__ === a.prototype);   //true

//Object.create
var d = create(a);
console.log(d.__proto__ === a);   //true;
var e = create(a.prototype);
console.log(e.__proto__ === a.prototype);   //true

这里说明一下，你能够在别处看到的create的实现是这样的：

//这里就简化第二个参数了。就写第一个参数的实现
function create(proto){
    function f(){};
    f.prototype = proto;
    return new f();
}

这个是兼容的写法，由于，__proto__ 属性是非标准的，部分如今浏览器实现了该属性。其实，你要是明白，new到底干了啥，你就明白，这两个实际是一个东西了。

建立一个新的对象（即实例对象）
把新对象的__proto__ 指向 new 后面构造函数的原型对象。
把构造函数中的 this 指向实例对象。
作一些处理，而后返回该实例对象。

下面，手写一个方法实现new 的功能：

function New(func){    //func 指传进来的构造函数,关于构造函数，我我的理解来就是用来生成一个对象实例的函数。

    var obj = {};   //这里就直接新建一个空对象了，不用new Object了，效果同样的，由于我感受这里讲实现new的功能   再用 new 就不太好。
    
    if(func.prototype != null){
        obj.__proto__ = func.prototype;
    }
  
    func.apply(obj,Array.prototype.slice.call(arguments, 1));
    //把func构造函数里的this 指向obj对象，把传进来的第二个参数开始，放入func构造函数里执行，好比：属性赋值。

    return obj;
    
}

不知各位看客是否看明白了呢，简单指明一下把

function create(proto){
    var f = function(){};
    f.prototype = proto;
    return new f();

//就等于
function create(proto){
    var f = function(){};
    var obj = {};
    f.prototype = proto;
    obj.__proto__ = f.prototype;
    return obj;
}

//就等于
function create(proto){
    var obj = {};
    obj.__proto__ = proto;
    return obj;
}

//看明白了吗， 就是用 function f 作了一下过渡。

//验证
function a(){};
var b = create(a);
console.log(b.__proto__ === a);     //true;

原型链开始！

我想，一说到JavaScript的原型是使人奔溃的，其中prototype容易和__proto__二者的联系就太头疼了，反正看图比看字舒服。

我看大多数的教程都是把prototype 和 __proto__放一块儿讲，我以为仍是分开将比较好，原本就不是一个东西

1、prototype属性

这是个函数才有的属性，它保存着对其原型对像的引用，即指向原型对象。（任何函数都有原型对象。）它的原型对象是看不见，摸不着的，只能经过函数的prototype属性来获取它。

好比

function A(){};
A.prototype;     //这样就获取到了A的原型对象

总结：你看到prototype，你就想着它对应着，它的原型对象就行。

2、原型对象

每当你建立一个函数，js 就会对应的生成一个原型对象。它只能被函数的prototype属性获取到。（A.prototype 总体变现为A的原型对象）

经过上面知识，咱们知道了，对象无非就两种，实例对象（new 和字面量建立的对象），和原型对象。

3、_ proto _属性

这个是非标准的属性，现代部分浏览器支持，好比，火狐，谷歌。对应的标准属性是[[prototype]]，这是个隐藏属性，获取不到。
这个属性就是把全部的函数啊，对象啊，连成一条链的东西，咱们称为原型链。这条链的终点是Object.prototype.__proto__ === null。

那它到底指向谁呢，我给了两种记忆方式吧：

一、函数的__proto__ 指向Function.protoype，原型对象的__proto__指向Object.prototype的。字面量 和 new出来的实例对象，指向其构造函数（谁 new 出来的）的prototype， Object.create 建立的对象呢，就是上面说的，你给它谁，它就指向谁。

二、除了Object.create建立的对象的__proto__指向你给定的，原型对象的__proto__指向Object.prototype，其余的__proto__ 都是指向其构造函数的原型对象。（你要是看懂了上面的new的实现，就应该明白为啥了。）

第二点注意：全部函数都是构造函数 Function 建立出来的，因此，函数的构造函数就是 Function。

选这两个中你喜欢的一个，对着下面的图找答案:

4、constructor属性

constructor 属性是原型对象独有的，它指向的就是它的构造函数。上面的1、prototype中说，函数的prototype属性指向它的原型对象。此时的函数是构造函数了。因此函数和它的原型对像以这两个属性保持着相互联系。

好比：

function A(){};
A.prototype.constructor === A   //true

Object.prototype.constructor === Object   //true

那函数的constructor 和普通对象的 constructor 是怎么回事呢?

开头说的function A(){};A.constructor 不知道你们有没有点疑惑？不是原型对象才有的吗？

其实，他们就是在一条原型链上的，也就是说，A 上没有 constructor 属性，它就会沿着原型链向上查找，到了 Object的原型对象上，就找到了constructor 属性，因而就能够用 A.constructor 了.

好比：

var Person = function(name) {
    this.name = name;
}

Person.prototype.getName = function(){
    return this.name;
}

var p = new Person("666");

console.log(p.getName());    //666

看这里Person 构造函数里是否是没有getName 方法，可是 p 实例怎么能够用呢？
由于p实例的__proto__指向的原型对象上有 getName 函数，因此 p 向原型链上查找到了 Person 的原型对象上，它有getName 方法，因而， p 就可使用这个方法了。

注意：因此，在找构造函数时，须要注意是在它的原型链上找，而不是原型对象上：

Object.constructor === Object.__proto__.constructor
//true

5、构造函数

啥是构造函数？其实每一个函数都是构造函数，只是咱们通常把 生成实例对象 的函数称为构造函数（经过new ，new 后面的就是构造函数），本质是函数。

好比：

var Person = function(name) {
    this.name = name;
    this.getName = function(){
        return this.name;
    }
}

var p1 = new Person("zdx");

console.log(p1.getName());     //zdx

var p2 = new Person("666");

console.log(p2.getName())     //666

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

//这里的Person 是个函数对吧，而后外面用  new Person();
//建立了一个Person 的实例，此时，Person 就是一个构造函数了，也称它为类，咱们把类的首字母都大写。
//由于，这个函数，使用 new 能够构造无数个实例来。

说一下，怕有人不知道，实例就是实例对象，由于一个实例，它自己就是对象。

6、原型链

开始放大招了，哈哈：

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

var p = new Person("zdx");

console.log(p.__proto__ === Person.prototype);   //true
//p是实例对象, 它的构造函数是 Person，按照上面的所说的，它是new 出来的，因此指向它构造函数的prototype

console.log(Person.prototype.__proto__ === Object.prototype);   //true
//Person.prototype 是原型对象， 因此指向 Object.prototype.

console.log(Person.__proto__ === Function.prototype);   //true
//Person 是构造函数, 它的构造函数是Function， 因此它就指向 Function.prototype

console.log(Function.prototype.__proto__ === Object.prototype);   //true
//Function.prototype 是原型对象， 因此指向 Object.prototype.

console.log(Object.prototype.__proto__ === null);   //true   
//这里就是全部原型链的终端，原型链到这里就没了。

因此说js 万物皆对象呢？全部的函数啊，对象啊，实例啊，它的原型链最终都到了Object.prototype原型对象。

画成图就是酱样子滴：

其实吧，有时候看图也不同好，哈哈，你能够按照我说的规则，本身不看图画一下。

简单来验证一下

var a = {};   //等同与 new Object()
console.log(a.prototype);  //undefined   对象没有原型对象
console.log(a.__proto__ === Object.prototype);  //true

var b = function(){};
console.log(b.prototype);  //b的原型对像
console.log(b.__proto__ === Function.prototype);

var c = [];    //等同于 new Array(),构造函数是Array
console.log(c.__proto__ === Array.prototype);    //true

var d = "";    //等同于 new String()，构造函数是 String
console.log(d.__proto__ === String.prototype);    //true

7、原型链的做用

其实，原型链的根本做用就是为了属性的读取。

上面简单说过，当在一个函数或者对象上读取属性时，它会先查找自身属性，若是有，就直接返回，若是没有呢，就会沿着原型链向上查找。

举个简单的栗子，每一个函数啊，对象啊，都有toString 方法，它是哪来的呢？
球都麻袋！（等等），不是属性的读取吗。toString这个是方法（函数）呀！同窗，你颇有眼光嘛。事实上，咱们把属性值为函数的，称之为方法。其实呢，你要了解这些方法是怎么回事。

function test(){};

test.toString();    //"function test(){}"

console.log(test.hasOwnProperty("toString"));   //false

console.log(test.__proto__.hasOwnProperty("toString"));   //true
//这就找到了，这里的hasOwnProperty 方法 是检查 该属性是否 是自身的属性

//而 （函数的__proto__）test.__proto__  都指向（等于） Function.prototype
console.log(test.__proto__ === Function.prototype);   //true

console.log(Function.prototype.hasOwnProperty("toString"));   //true
//看到这里，明白了吗。函数的内置方法(函数) 一部分是 Function.prototype 上的属性；
//一部分？ 是的，由于，原型链的终端 在  Object.prototype ;
//因此，在Object.prototype 上添加的属性，方法， 函数也是可使用的；

//好比：
Object.prototype.say = function() { console.log(5666) };

function test(){};

test.say();   //5666

那么属性的赋值是怎么一回事呢？

首先函数或对象会查找 自身属性，若是有，就会 覆盖该属性 的值，若是没有，它就会建立一个 自身的属性，总之，赋值是不会对原型链进行查找。

function Person(){};
var p = new Person();
//若是你用的同一个窗口运行这个，结果多是上面的 5666，由于刚刚更改了该函数，您从新打开个浏览器窗口便可。
p.toString();    //"[object Object]"  

//有疑惑吗，其实，toString 这个方法， Function.prototype, 和 Object.prototype 都有；
Function.prototype.toString = function(){
    console.log("我是Function原型对象的");
}
Person.toString();    //我是Function原型对象的
p.toString();       //"[object Object]"
//Object上的toString 方法并无改变。

8、实际代码中原型链的运用

运用最多见的就是继承了。

function Person(name){   //父类（构造函数）
    this.name = name;
}
Person.prototype.getName = function(){   //在父类的原型对象上添加方法
    return this.name;
}

function Son(name,age){    //子类（构造函数）
    this.name = name;    //为了减轻读者压力，就不使用 call 了, Person.call(this, name);
    this.age = age;
}

Son.prototype = new Person();    //把子类（构造函数） 的原型对象  挂到 原型链上去。

Son.prototype.getAge = function(){
    return this.age;
}
var s = new Son("zdx",666);
s.getName();    //Son.prototype 上没有 getName方法，如今能使用了，就完成了 继承。

须要解读一下嘛？

Son.prototype = new Person();

//就等于
var obj = {};
obj.__proto__ = Person.prototype;
Son.prototype = obj;
//这样,就把Son.prototype 挂到原型链上去了。
Son.prototype.__proto__ === Person.prototype  //ture

而后Son 的实例对象上使用方法时，就沿着链查找， Son.prototype 没有，上级Person.prototype 上有。ok，继承了。

9、解读jq 的原型链

简单写一个：

var jQuery = function(name) {
    return new jQuery.fn.init();
}

jQuery.fn = jQuery.prototype = {
    constructor: jQuery,
    init: function(name) {
        this.name = name;
    },
    each: function() {
        console.log('each');
        return this;
    }
}

jQuery.fn.init.prototype = jQuery.fn;

估计看起来有点困难，没事，咱们简化一下

function jQuery(name){
    return new init(name);
}

function init(name){
    this.name = name;
}

jQuery.prototype = {
    constructor: jQuery,
    each: function(){ 
        console.log('each')
    }
}

init.prototype = jQuery.prototype;

看懂了吗，你使用jQuery(), 就至关于与 new jQuery()；其实你 new init() 和 new jQuery(); 是同样的；由于 init.prototype = jQuery.prototype ，因此它们的实例对象是同样的。它这样写，就是为了你使用方便，不须要你使用 new 来建立jq对象。

使用起来就是这样的：

$();
//是否是比

new $();
//方便多了。

最后要说的就是，别把原型链和做用域链搞混了！！！哈哈哈

进击的 JavaScript （七）之 原型链