彻底搞懂JS原型、原型链和继承

2,036 阅读6分钟

这是我参与 8 月更文挑战的第 1 天,活动详情查看: 8月更文挑战

在 js 中我们是使用构造函数来新建一个对象的,每一个构造函数的内部都有一个 prototype 属性值,这个属性值是一个对象,这个对象包含了可以由该构造函数的所有实例共享的属性和方法。

当我们使用构造函数新建一个对象后,在这个对象的内部将包含一个指针,这个指针指向构造函数的 prototype 属性对应的值,在 ES5 中这个指针被称为对象的原型。一般来说我们是不应该能够获取到这个值的,但是现在浏览器中都实现了 proto 属性来让我们访问这个属性,但是我们最好不要使用这个属性,因为它不是规范中规定的。ES5 中新增了一个 Object.getPrototypeOf() 方法,我们可以通过这个方法来获取对象的原型。

什么是原型链?

当我们访问一个对象的属性时,如果这个对象内部不存在这个属性,那么它就会去它的原型对象里找这个属性,这个原型对象又会有自己的原型,于是就这样一直找下去,也就是原型链的概念。原型链的尽头一般来说都是 Object.prototype 所以这就是我们新建的对象为什么能够使用 toString() 等方法的原因。

特点:

JavaScript 对象是通过引用来传递的,我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时,与之相关的对象也会继承这一改变。

获取原型的方法?

  1. p.__proto__

  2. p.constructor.prototype

  3. Object.getPrototypeOf(p)


var b = {a:1, b:2}

// b的原型指向Object
// a: 1
// b: 2
// [[Prototype]]: Object
// constructor: ƒ Object()
// hasOwnProperty: ƒ hasOwnProperty()
// isPrototypeOf: ƒ isPrototypeOf()
// propertyIsEnumerable: ƒ propertyIsEnumerable()
// toLocaleString: ƒ toLocaleString()
// toString: ƒ toString()
// valueOf: ƒ valueOf()
// __defineGetter__: ƒ __defineGetter__()
// __defineSetter__: ƒ __defineSetter__()
// __lookupGetter__: ƒ __lookupGetter__()
// __lookupSetter__: ƒ __lookupSetter__()
// get __proto__: ƒ __proto__()
// set __proto__: ƒ __proto__()

原型链相关方法

  • isPrototypeOf() 如果隐式原型__proto__指向调用isPrototypeOf()方法的对象原型, 那么这个方法就返回true

  • Object.getPrototypeOf() 获取实例的隐式原型(proto)的指向

  • hasOwnProperty() 判断属性是否是存在于自己的实例中

  • Object.keys() 获获取对象 实例上 可枚举的属性名

  • Object.getOwnPropertyName() 获得对象 实例上 属性名,无论它是否可枚举

  • for in 获取 实例&原型上 可枚举 的属性

  • instanceOf object instanceof constructor,用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。


function Person(){this.age = 100}
Person.prototype.name="zhan";
Person.prototype.sex='女'
Person.prototype.sayName=function(){
    return this.name;
}

var person1 = new Person;
person1.name="wang";
person1.job='yanyuan'
Object.defineProperty(person1, "age", {value:"forever 18", enumerable:false});

Person.prototype.isPrototypeOf(person1); // true

Object.getPrototypeOf(person1) == Person.prototype // true

person1.hasOwnProperty("age");  //true 
person1.hasOwnProperty("sex"); // false  因为sex是原型的属性,而不是自己实例的属性

Object.keys(person1) //  ["name", "job"]
Object.keys(Person.prototype) //  ["name", "sex", "sayName"]

Object.getOwnPropertyNames(person1); // ["age", "name", "job"]
Object.getOwnPropertyNames(Person.prototype); // ["constructor", "name", "sex", "sayName"]

for(var i in person1) console.log(i) // name job sex sayName
for(var i in Person.prototype) console.log(i) // name sex sayName

person1 instanceof Person //true
person1 instanceof Object // true

JavaScript 继承的几种实现方式

想要继承,就必须要提供个父类(继承谁,提供继承的属性)

  1. 原型链继承:让新实例的原型等于父类的实例。

    • 特点
    1. 实例可继承的属性有:实例的构造函数的属性,父类构造函数属性,父类原型的属性。(新实例不会继承父类实例的属性!)
    • 缺点
    1. 新实例无法向父类构造函数传参。
    2. 继承单一。
    3. 所有新实例都会共享父类实例的属性。(原型上的属性是共享的,一个实例修改了原型属性,另一个实例的原型属性也会被修改!)
  2. 借用构造函数(类式继承):用.call()和.apply()将父类构造函数引入子类函数(在子类函数中做了父类函数的自执行(复制))

    - 特点

    1. 只继承了父类构造函数的属性,没有继承父类原型的属性。
    2. 解决了原型链继承缺点1、2、3。
    3. 可以继承多个构造函数属性(call多个)。
    4. 在子实例中可向父实例传参。 - 缺点
    5. 只能继承父类构造函数的属性。
    6. 无法实现构造函数的复用。(每次用每次都要重新调用)
    7. 每个新实例都有父类构造函数的副本,臃肿。
  3. 组合式继承(组合原型链继承和借用构造函数继承)(常用) 结合了两种模式的优点,传参和复用

    • 特点
    1. 可以继承父类原型上的属性,可以传参,可复用。
    2. 每个新实例引入的构造函数属性是私有的。
    • 缺点:调用了两次父类构造函数(耗内存),子类的构造函数会代替原型上的那个父类构造函数。
  4. 原型式继承

    • 重点:用一个函数包装一个对象,然后返回这个函数的调用,这个函数就变成了个可以随意增添属性的实例或对象。object.create()就是这个原理。
    • 特点:类似于复制一个对象,用函数来包装。
    • 缺点
    1. 所有实例都会继承原型上的属性。
    2. 无法实现复用。(新实例属性都是后面添加的)
  5. 寄生式继承

    • 重点:就是给原型式继承外面套了个壳子。
    • 优点:没有创建自定义类型,因为只是套了个壳子返回对象(这个),这个函数顺理成章就成了创建的新对象。
    • 缺点:没用到原型,无法复用。
  6. 寄生组合式继承(常用)

    • 寄生:在函数内返回对象然后调用
    • 组合:1、函数的原型等于另一个实例。2、在函数中用apply或者call引入另一个构造函数,可传参 
    • 重点:修复了组合继承的问题

// 父类---------------------------

function Person(name){ //给构造函数添加参数
    this.name=name
    this.sayName =function(){
        alert(this.name)
    }
}
Person.prototype.age = 18; //给构造函数添加了原型属性

// 原型链继承---------------------------
function Per(){
    this.name = 'panpan';
}
Per.prototype= new Person(); //重点
var per1 = new Per();
console.log(per1.age); // 18
// instanceof判断元素是否在另一个元素的原型链上
console.log(per1 instanceof Person); //true

// 借用构造函数继承---------------------
function Con(){
    Person.call(this,'ava'); //重点
    this.age = 21
}
var con1 = new Con()
console.log(con1.name) //ava
console.log(con1.age) //21
console.log(con1 instanceof Person) //false

// 组合原型链继承和借用构造函数继承
function SubType(name){
    Person.call(this,name); //借用构造函数模式
}
SubType.prototype= new Person(); //原型链继承
var sub = new SubType('lian')
console.log(sub.name) //lian 继承构造函数属性
console.log(sub.age) //18 继承父类原型属性

// 原型式继承---------------------------
// 先封装1个函数容器,用来输出对象和承载继承的原型
function content(obj){
    function F(){}
    F.prototype=obj; //继承传入的参数
    return new F() //返回函数对象
}
var sup = new Person(); //拿到父类的实例
var sup1 = content(sup)
console.log(sup1.age) //18 继承父类函数属性

// 寄生式继承----------------------
// 给原型式继承再套个壳子传递参数
function subObject(obj){
    var sub = content(obj)
    obj.name= 'pan';
    return sub
}
//声明后成了可增添属性的对象
var sup2 = subObject(sup)
console.log(typeof subObject) //function
console.log(typeof sup2) //object
console.log(sup2.name) //pan

// 寄生组合式继承---------------------
// 寄生
function content(obj){
    function F(){}
    F.prototype=obj; //继承传入的参数
    return new F() //返回函数对象
}
// content就是F实例的另一种表达
var con = content(Person.prototype)
// con实例(F实例)的原型链继承了父类函数的原型
// 上述更像原型链继承,只不过继承了原型属性

// 组合
function Sub(){
    Person.call(this) // 继承父类构造函数属性
} //解决组合式2次调用构造函数属性的缺点

// 重点
Sub.prototype = con; //继承con实例
con.constructor = Sub; //一定要修复实例
var sub1 = new Sub();
// Sub实例继承了构造函数属性、父类实例、con的函数属性
console.log(sub1.age)