详谈javascript的原型链问题

1、创建对象的几种方法

 // 字面量
    var obj1 = {
        name:'小一'
    };
    //new Object()
    var obj2 = new Object({name:'小二'});
    // 构造函数
    function f(name) {
        this.name = name
    }
    var obj3 = new f('小三');
    // Object create()  一个新对象，带着指定的原型对象和属性
    var obj4 = Object.create({name:'小四'});
    console.log(obj1);
    console.log(obj2);
    console.log(obj3);
    console.log(obj4);

打印结果：

另外：Object.create(proto,propertiesObject) // 创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。 //proto:新创建对象的原型对象 // propertiesObject参数为null或者一个对象，如果是其他类型则会报错。表示添加到新创建对象的可枚举属性

那么什么是原型链呢？简单来说就是组成原型的链，我们知道每个实例都有一个属性__proto__指向它的原型，而原型也是一个对象，也有__proto__指向它的原型，这样一层层找下去，就形成了原型链。最后是原型链有什么作用呢？

function Foo(){
        this.name = name
    }
    var obj5 = new Foo('小明');
    var obj6 = new Foo();
    obj5.__proto__.say = function () {
        console.log('hello')
    };
    obj5.say();
    obj6.say();

打印结果：

发现都能打印，因为say()方法是添加在原型对象上的，实例obj5和obj6都是由Foo()同一个构造函数new出来的实例，所以obj5和obj6的__proto__指向同一个原型对象，当给原型对象添加方法或者属性时，obj5和obj6都能访问到。这样可以解决多个实例都用到同一方法时，直接给原型对象添加，而不必每一个实例对象去添加一个方法或者属性。在访问属性或者方法时会先在实例对象上查找，如果找不到就会往上找。

再来解释一下__proto__，prototype，constructor的联系

实例是由构造函数new出来的一个对象

实例的__proto__指向原型对象 obj5.__proto__ === Foo.prototype

构造函数的prototype指向原型

原型的constructor指向它的构造函数 obj5.__proto__.constructor === Foo

instanceof又是什么作用呢？其实就是用来检验实例的__proto__和构造函数的prototype是不是指向同一个原型对象。如果是，则返回true,否则返回false

详谈javascript的原型链问题

猜你喜欢