yihao.dev
返回文章列表

Javascript 原型链与继承

javascript 的每个对象有一个内部的私有链接 proto, 它指向其构造函数的原型 prototype，而这个构造函数的 prototype 则继承于上层构造函数的 prototype, 这一层层的指向链接我们称之为原型链。形成这一层层链接我们要使用到 new 操作符。

new 操作符做了什么

function A(){
    this.a = 1;
}
 
var b = new A();
 
b.__proto__ === A.prototype //true

可以看到 b 的 proto 的确是指向了 A 的 prototype, 上面的 new 操作符可以解释为以下代码:

var b = new Object();
b.__proto__ = A.prototype;
A.call(b);

首先 b 赋值为一个空对象，将 b 的 proto 指向了 A 的 prototype, 然后将 A 的 this 指向 b。

原型继承

在面向对象中，继承是指子类继承来自父类的所有属性和方法，javascript 并没有类，只有构造函数，要实现继承我们要用到上面提到的原型，我们叫原型继承

function Person(name, age){
    this.name = name;
    this.age = age;
}   
 
function Engineer(name, age, job){
    Person.call(this, name, age);
    this.job = job;
}
 
Engineer.prototype = new Person();
Engineer.prototype.constructor = Engineer;
 
someone = new Engineer('john', 28, 'front-end');
 
someone.name; //john
someone.age; //28
someone.job; //front-end

someone 的 proto 指向了Engineer 的 prototype, 而我们把 Engineer 的 prototype 赋值为 Person 的实例化对象，使其继承了 Person 所有的属性， 也就是 someone 同时拥有了 Person 和 Engineer 的所有属性。

工厂模式

上面的做法估计是大家比较熟悉的方式，接近于面向对象思想，而下面的继承方式完全抛弃了面向对象的思想，抛弃了原型链

function person(name, age){
    var that = {};
    that.name = name;
    that.age = age;
    return that;
}
 
function engineer(name, age, job){
    var that = person(name, age);
    that.job = job;
    return that;
}
 
someone = engineer('john', 28, 'front-end');
 
someone.name; //john
someone.age; //28
someone.job; //front-end

上面的方法没用到构造函数，没用到 new 操作符, 在 personal 中创建了一个对象，用来存储 peronal 的所有属性，并在函数最后作为返回值，在 engineer 中，执行了 person 函数，并把返回值赋值给了一个变量，这样我们就取到到 person 的所有属性，然后在这个变量上扩充自己的属性，最后也是把这个变量作为了返回值。

javascriptjsonpajax