初始原型链(一)

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

什么是原型?

在 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等)的原型。请大家多多支持!

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

posted @ 2017-09-16 20:32  卡迪斯上小学  阅读(611)  评论(3编辑  收藏  举报