初始原型链（一）

前端面试经常会问关于原型链的知识，今天我总结了一下关于原型链的内容，希望对广大小白一点点参考~

什么是原型？

在 js 中，对象都有 __proto__ 属性， 就是指这个对象的原型，如果构造函数 A 实例化一个对象 B，那么 A.prototype 就是 B 的原型。也就是：

  function A(){}
  
  var B = new A();

  B.__proto__ == A.prototype

什么是原型链？

介绍完原型，那么就必须说原型链了。

刚才提到，每个对象都有 __proto__属性，指向其构造函数的 prototype， 而 prototype 的值也是一个对象啊，所以就形成一条链，称为原型链。

举个例子：

cat 的原型链

我们创建一个叫做 Animal 的类， 并实例化一个对象 cat，我们来一点一点探索 cat 所处的原型链。

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

var cat = new Animal("cat");

cat 由 Animal 实例化而来，那么就之前的说法，cat 的 __proto__ 指向 Animal 的 prototype:

的确如此！

接下来考虑到 Animal 的 prototype 也是一个对象，也有原型 ，那么 Animal.prototype 的 __proto__  有指向什么呢？

我们分析到 Animal 的 prototype 是一个对象， 那么应该由 Object 构造，这么说，Animal.prototype.__proto__  应该指向 Object.prototype 。

Object.prototype 也是一个对象啊，那么它的原型又是什么？ 

原型链的定义中提到，原型链的终点指向 null 。所以， Object.prototype.__proto__ 应该指向  null。

小结

实例化 cat  有以下关系：

1. cat 由 Animal 构造，所以有：cat.__proto__ == Animal.prototype；

2. Animal.prototype是一个对象，由 Object 构造，所以有：Animal.prototype.__proto__  == Object.prototype；

3. 原型链的终点指向 null，所以有：Object.prototype.__proto__ == null；

也就是：

cat.__proto__.__proto__.__proto__ == null；

图示：

 这就是 cat 的原型链了，我们知道了什么是原型链，那么原型链有什么用？

原型链的作用

 当我们用一个构造函数实例化很多不同的对象，而又希望给这些对象绑定相同的方法，就可以绑定到它们的构造函数上去。

举个例子：

我们想让所有的字符串都拥有一个去掉空格的方法，调用这个方法，就能去掉字符串中的所有空格。我们只需要给 String.prototype 绑定一个方法：

String.prototype.trim = function(){
        return this.replace(/\s+/g,"");
    };


    var str = "This is a good day!";
    console.log(str.trim());

//打印出 Thisisagoodday！

原型链的属性查找规则

 当从对象搜寻一个属性或者方法的时候，会遵循以下规则：

1. 先从本身拥有的属性或方法查找，如果对象本身有，那就直接用自己的属性或者方法；

function Animal( name){
        this.name = name;
        this.say = function (){
            console.log("hello cat!");
        }
    }

    var cat = new Animal("cat");
    cat.say = function (){
        console.log("cat hello!");
    }
    cat.say();　　　　　　　　　　　　　　　　//打印出 cat hello!
　　

2. 当本身找不到这个属性或者方法的时候，就会沿着原型链找，使用原型链上的方法或者属性；

 function Animal( name){
        this.name = name;
        this.say = function (){
            console.log("hello cat!");
        }
    }

    var cat = new Animal("cat");
    cat.say();          //打印出  hello cat!

3. 原型链也找不到，那么找不到的属性返回 undefined，找不到的方法会报错，提示不是一个 function。

console.log(cat.sayHello());   　　　　// 报错：Uncaught TypeError: cat.sayHello is not a function
console.log(cat.age);　　　　　　　　　　//undefined

特殊的：

没有原型属性的对象

通过 Object.create(null)生成没有原型的对象。

后记

这是我对原型链知识的一点理解和看法，如有错误的理解或表述，欢迎大家指出，接下来我会着重探究几个特殊的对象（Object、Function等）的原型。请大家多多支持！

 如需转载，请指明出处，素质转载，谢谢。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有