写文章
  1. 码农之家首页
  2. 前端教程

JavaScript老生常谈的原型和继承

我心飞翔 • • 前端教程 • 阅读 10

原型、原型链

为什么需要原型原型链？

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.eat = function() {
    console.log(age + "岁的" + name + "在吃饭。");
  }
}

let p1 = new Person("xiaohong", 24);
let p2 = new Person("xiaohong", 24);

console.log(p1.eat === p2.eat); // false

可以看到，对于同一个函数，我们通过 new 生成出来的实例，都会开出新的一块堆区，所以上面代码中 person 1 和 person 2 的吃饭是不同的。

拥有属于自己的东西（例如房子、汽车），这样很好。但它也有不好，毕竟总共就那么点地儿（内存），你不停地建房子，到最后是不是没有空地了？（内存不足）

所以，咱要想个法子，建个类似于共享库的对象（例如把楼房建高），这样就可以在需要的时候，调用一个类似共享库的对象（社区），让实例能够沿着某个线索去找到自己归处。

而这个线索，在前端中就是原型链 prototype。

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

// 通过构造函数的 Person 的 prototype 属性找到 Person 的原型对象
Person.prototype.eat = function() {
  console.log("吃饭");
}

let p1 = new Person("jsliang", 24);
let p2 = new Person("梁峻荣", 24);

console.log(p1.eat === p2.eat); // true

这样我们就通过分享的形式，让这两个实例对象指向相同的位置了。

原型

首先清楚两个概念：

  • 引用类型，都具有对象特性，即可自由扩展属性。(引用类型：Object、Array、Function、Date、RegExp)

  • 每个函数function都有一个显示原型prototype，每个实例对象都有一个隐式原型__proto__

function Fn() { // 内部语句：this.prototype = {}
        
}
// 1、每个函数function都有一个prototype，即显示原型（属性）
console.log(Fn.prototype);
// 2、每个实例对象都有一个__proto__,可称为隐式原型（属性）
var fn = new Fn(); // 内部语句： this.__proto__ = Fn.prototype
console.log(fn.__proto__);

两个准则

js之父在设计js原型原型链的时候遵循以下两个准则：

准则一： 原型对象（即Fn.prototype）的constructor指向构造函数本身

准则二： 实例对象（即 fn ）的__proto__指向其构造函数的显示原型

function Fn() {}
var fn = new Fn();
// 原型对象的 constructor 指向构造函数本身
console.log(Fn.prototype.constructor === Fn); // true
// 对象的隐式原型的值为其对应构造函数的显示原型的值
console.log(Fn.prototype === fn.__proto__); // true

理解Function与Object特例

  • 每个函数都是Function的实例，所以每个函数既有显示原型又有隐式原型，所有函数的隐式原型指向Function.prototype;构造器Function的构造器是它自身

// function Foo() {} 相当于 var Foo = new Function()

// Function = new Function() => Function.__proto__ = Function.prototype

// Object 作为构造函数时，其 __proto__ 内部属性值指向 Function.prototype
// Object.__proto__ = Function.prototype

// Function.constructor=== Function;//true

  • Object 构造函数创建一个对象包装器。JavaScript中的所有对象都来自 Objec，所有对象都是Object的实例；所有对象从Object.prototype继承方法和属性，尽管它们可能被覆盖。

// Fn的原型对象(Fn.prototype)也来自Object，故Fn.prototype.__proto__ = Object.prototype
function Fn() {}

原型链

  • 读取某个对象的属性时，会自动到原型链中查找。
    • 现在自身属性中查找，找到返回
    • 找不到则继续沿着__proto__这条链向上查找，找到返回
    • 如果最终没找到，返回undefined

  • 设置对象的属性值时，不会查找原型链，如果当前对象中没有此属性，直接添加此属性并设置其值，

  • 方法一般定义在原型中，属性一般通过构造函数定义在对象本身上

原型链就是一个过程，原型是原型链这个过程中的一个单位，贯穿整个原型链

经典面试题

// 测试题1
function A() {

}
A.prototype.n = 1;

var b = new A();
A.prototype = {
    n: 2,
    m: 3
}

var c = new A();
console.log(b.n, b.m, c.n, c.m); 




// 1 undefined 2 3

// 测试题2
var F = function() {

};
Object.prototype.a = function() {
    console.log('a()');
};
Function.prototype.b = function() {
    console.log('b()');
};
var f = new F();
f.a(); 
f.b(); 
F.a(); 
F.b();






f.a(); // a()
f.b(); // 报错：Uncaught TypeError: f.b is not a function
F.a(); // a()
F.b(); // b()

JavaScript老生常谈的原型和继承

原型、原型链的意义与适用场景

原型对象的作用，是用来存放实例中共有的那部份属性、方法，可以大大减少内存消耗。

七种继承方案

ECMAScript只支持实现继承,而且其 实现继承 主要是依靠原型链来实现的.

原型链继承

实现

function Person(name) {
    this.foods = ['苹果', '芒果', '西瓜'];
    this.name = name;
}

Person.prototype.getName = function() {
    return this.name;
}

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

// 关键，将Student的prototype指向Person的实例
Student.prototype = new Person();

var stu1 = new Student('小红');
var stu2 = new Student('小蓝');
console.log(stu1.getName()); // 小红
console.log(stu2.getName()); // 小蓝

缺点：

多个实例对引用类型的操作会被篡改。

// 向一个实例的foods里添加一个元素，其它实例的foods里也会增加此元素
stu1.foods.push('橙子'); 
console.log(stu1.foods); // ["苹果", "芒果", "西瓜", "橙子"]
console.log(stu2.foods); // ["苹果", "芒果", "西瓜", "橙子"]

图解

JavaScript老生常谈的原型和继承

借用构造函数继承

实现

function Person(name) {
    this.foods = ['苹果', '芒果', '西瓜'];
    this.name = name;
}

function Student(name, school) {
    // 关键，继承自Person
    Person.call(this, name); // 相当于：this.Person(name, age);
    this.school = school;
}

var stu1 = new Student('小红', '幼儿园');
var stu2 = new Student('小蓝', '高中');
console.log(stu1.name, stu1.school); // 小红 幼儿园
console.log(stu2.name, stu2.school); // 小蓝 高中

stu1.foods.push('橙子');
console.log(stu1.foods); // ["苹果", "芒果", "西瓜", "橙子"]
console.log(stu2.foods); // ["苹果", "芒果", "西瓜"]

核心代码是Person.call(this)，创建子类实例时调用Person构造函数，于是Student的每个实例都会将Person中的属性和方法复制一份。

缺点：

  • 只能继承父类的实例属性和方法，不能继承原型属性/方法

  • 无法实现复用，每个子类都有父类实例函数的副本，影响性能

Person.prototype.eat = function() {
    console.log('吃饭......');
}

stu1.eat(); // stu1.eat is not a function

图解

JavaScript老生常谈的原型和继承

组合继承

组合上述两种方法就是组合继承。用原型链实现对原型属性和方法的继承，用借用构造函数技术来实现实例属性的继承。

实现

function Person(name) {
    this.foods = ['苹果', '芒果', '西瓜'];
    this.name = name;
}

Person.prototype.getName = function() {
    console.log(this.name);
}

function Student(name, school) {
    // 继承实例属性
    Person.call(this, name); // 第二次调用 Person()
    this.school = school;
}

// 继承原型上的属性和方法，第一次调用 Person()
Student.prototype = new Person(); 

Student.prototype.getSchool = function() {
    console.log(this.school);
}

var stu1 = new Student('小红', '幼儿园');
var stu2 = new Student('小蓝', '高中');
console.log(stu1.name, stu1.school); // 小红 幼儿园
console.log(stu2.name, stu2.school); // 小蓝 高中

stu1.foods.push('橙子');
console.log(stu1.foods); // ["苹果", "芒果", "西瓜", "橙子"]
console.log(stu2.foods); // ["苹果", "芒果", "西瓜"]

stu1.getName(); // 小红
stu1.getSchool(); // 幼儿园

组合继承弥补了原型链和借用构造函数的不足，是js中使用最多的继承模式。

缺点

  • 父类构造器始终会被调用两次，有两组相同的属性：一组在实例上，一组在Student的原型上
    • 第一次调用Person()，给Student.prototype写入两个属性name、foods。
    • 第二次调用Person()，给Student的实例写入两个属性name、foods。

JavaScript老生常谈的原型和继承

图解

JavaScript老生常谈的原型和继承

原型式继承

即使不自定义类型也可以通过原型实现对象之间的信息共享，

实现

object函数会创建一个临时构造函数，将传入的对象赋值给这个构造函数的原型，然后返回这个构造函数的一个实例。本质上，object()是对传入的对象执行了一次浅复制。

function object(obj) {
    function F() {};
    F.prototype = obj;
    return new F();
} 

var person = {
    name: '小红',
    foods: ["苹果", "芒果", "西瓜"]
}

var person1 = object(person);
person1.name = '小蓝';
person1.foods.push('橙子');

var person2 = object(person);
person2.name = '小黑';
person2.foods.push('香蕉');

console.log(person1.name); // 小蓝
console.log(person1.foods); // ["苹果", "芒果", "西瓜", "橙子", "香蕉"]
console.log(person2.name); // 小黑
console.log(person2.foods); // ["苹果", "芒果", "西瓜", "橙子", "香蕉"]

原型式继承非常适合不需要单独创建构造函数，但仍然需要在对象间共享信息的场合。

缺点

  • 原型链继承多个实例的引用类型属性指向相同，存在篡改的可能。与原型链模式类似。

另外，ES5存在Object.create()方法，可以代替上面的object方法。

图解

JavaScript老生常谈的原型和继承

寄生式继承

思路类似于寄生构造函数与工厂模式：创建一个实现继承的函数，以某种方式增强对象，然后返回这个对象。

实现

function object(obj) {
    function F() {};
    F.prototype = obj;
    return new F();
} 

function crateAnother(original) {
    var clone = object(original); // 通过调用 object() 函数创建一个新对象
    clone.sayHi = function() {  // 以某种方式来增强对象
        console.log("hi");
    };
    return clone; // 返回这个对象
}

var person = {
    name: '小红',
    foods: ["苹果", "芒果", "西瓜"]
}

var person1 = crateAnother(person);
person1.name = '小蓝';
person1.foods.push('橙子');

var person2 = crateAnother(person);
person2.name = '小黑';
person2.foods.push('香蕉');

console.log(person1.name); // 小蓝
console.log(person1.foods); // ["苹果", "芒果", "西瓜", "橙子", "香蕉"]
person1.sayHi(); // hi

console.log(person2.name); // 小黑
console.log(person2.foods); // ["苹果", "芒果", "西瓜", "橙子", "香蕉"]
person2.sayHi(); // hi
console.log(person1.sayHi === person2.sayHi); // false

寄生式同样适合主要关注对象，而不在乎类型和构造函数的场景。

缺点

  • 原型链继承多个实例的引用类型属性指向相同，存在篡改的可能。
  • 无法实现复用函数，与构造函数模式类似。

图解

JavaScript老生常谈的原型和继承

寄生组合式继承

前面说组合继承是 JavaScript 最常用的继承模式; 不过, 它也有自己的不足. 组合继承最大的问题就是无论什么情况下,都会调用两次父类构造函数: 一次是在创建子类型原型的时候, 另一次是在子类型构造函数内部. 寄生组合式继承就是为了降低调用父类构造函数的开销而出现的 .

基本思路是不通过调用父类构造函数给子类原型赋值，而是取得父类原型的一个副本。

实现

function object(obj) {
    function F() {};
    F.prototype = obj;
    return new F();
} 

function inheritPrototype(subType, superType) {
    let prototype = object(superType.prototype); // 创建对象，创建父类原型的一个副本
    prototype.constructor = subType; // 增强对象，弥补因重写原型而丢失的默认的constructor
    subType.prototype = prototype; // 复制对象，将新创建的对象赋值给子类的原型
}

function Person(name) {
    this.foods = ['苹果', '芒果', '西瓜'];
    this.name = name;
}

Person.prototype.getName = function() {
    console.log(this.name);
}

// 借用构造函数传递增强子类实例属性
function Student(name, school) {
    // 继承实例属性
    Person.call(this, name); 
    this.school = school;
}

// 将父类原型指向子类
inheritPrototype(Student, Person);

Student.prototype.getSchool = function() {
    console.log(this.school);
}

var stu1 = new Student('小红', '幼儿园');
var stu2 = new Student('小蓝', '高中');
console.log(stu1);
console.log(stu1.name, stu1.school); // 小红 幼儿园
console.log(stu2.name, stu2.school); // 小蓝 高中

stu1.foods.push('橙子');
stu2.foods.push('香蕉');
console.log(stu1.foods); // ["苹果", "芒果", "西瓜", "橙子"]
console.log(stu2.foods); // ["苹果", "芒果", "西瓜", "香蕉"]

只调用了一次Person和构造函数，避免了Student.prototype上不必要也用不到的属性，效率更高。寄生组合式继承集寄生式继承和组合继承的有点于一身，是实现引用类型继承的最佳模式。

JavaScript老生常谈的原型和继承

图解

JavaScript老生常谈的原型和继承

ES6类继承 extends

class Person {
    constructor(name) {
        this.name = name;
        this.foods = ['苹果', '芒果', '西瓜'];
    }

    getName() {
        console.log(this.name);
    }
}

class Student extends Person {
    constructor(name, school) {
        super(name);
        this.school = school;
    }

    getSchool() {
        console.log(this.school);
    }

}

var stu1 = new Student('小红', '幼儿园');
var stu2 = new Student('小蓝', '高中');
stu1.getName();
stu1.getSchool();
stu2.getName();
stu2.getSchool();

stu1.foods.push('橙子');
stu2.foods.push('香蕉');
console.log(stu1.foods); // ["苹果", "芒果", "西瓜", "橙子"]
console.log(stu2.foods); // ["苹果", "芒果", "西瓜", "香蕉"]

原文链接：https://juejin.cn/post/7229843601735647289 作者：白哥学前端

赞 (0)
我心飞翔我心飞翔
0 0
上一篇 2023年5月6日 上午10:05
下一篇 2023年5月6日 上午10:15

相关推荐

发表回复

登录后才能评论