导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

冷门技能

继承

实例化对象继承

• 特点：继承了原型链上的所有属性
• 缺点：继承了一些没必要继承的属性，例如 name

Professor.prototype = {
	name: 'Mr.Zhang',
  tSkill: 'Java'
}
function Professor() {}
var professor = new Professor();

Teacher.prototype = professor;
function Teacher() {
	this.name = 'Mr.Wang';
  this.mSkill = 'JS';
}
var teacher = new Teacher();

Student.prototype = teacher;
function Student() {
	this.name = 'Mr.Li';
  this.pSkill = 'HTML';
}
var student = new Student();
console.log(student);

利用 call/apply 借用构造函数

• 特点：call/apply 是通过改变 this 指向，来借用构造函数的属性和方法
• 缺点：此方法实例化的 student 无法继承 Teacher.prototype 原型上的属性

Teacher.prototype.wife = 'Ms.Liu';
function Teacher(name, mSkill) {
	this.name = name;
  this.mSkill = mSkill;
}
function Student(name, mSkill, age, major) {
	Teacher.apply(this, [name, mSkill]);
  this.age = age;
  this.major = major;
}
var student = new Student('Mr.B', 'JS', 18, 'Computer');
console.log(student);

Student.prototype = Teacher.prototype

• 特点：能够继承 Teacher 原型
• 缺点：Student 和 Teacher 共用原型，修改 Student.prototype 会导致 Teacher.prototype 改变

function Teacher() {
	this.name = 'Mr.Wang';
  this.mSkill = 'JS';
}
Teacher.prototype = {
	pSkill: 'JQ'
}
var teacher = new Teacher();

Student.prototype = Teacher.prototype;
function Student() {
	this.name = 'Mr.Li';
}

var student = new Student();
Student.prototype.name = 'student';
console.log(student);
console.log(Teacher.prototype);

⭐️ 圣杯模式继承（圣杯中间的部位就是连接两头的中间件）

方案：

1. 创建一个空的构造函数
2. 使其继承父类构造函数的原型
3. 由此构造函数实例化出一个对象
4. 把此对象赋值给子类构造函数的 prototype 原型

function Teacher() {
	this.name = 'Mr.Wang';
  this.mSkill = 'JS';
}
Teacher.prototype = {
	pSkill: 'JQ'
}
var teacher = new Teacher();

function Student() {
	this.name = 'Mr.Li';
}

function Buffer() {}
Buffer.prototype = Teacher.prototype;
var buffer = new Buffer();

Student.prototype = buffer;
Student.prototype.age = 18;
var student = new Student();
console.log(teacher);
console.log(buffer);
console.log(student);

封装继承方法

Teacher.prototype.name = 'Mr.Wang';
function Teacher() {}
function Student() {}

inherit(Student, Teacher);
var s = new Student();
var t = new Teacher();
console.log(t);
console.log(s);

function inherit(Target, Origin) {
	function Buffer() {}
  Buffer.prototype = Origin.prototype;
  Target.prototype = new Buffer();
	// 还原构造器
  Target.prototype.constructor = Target;
  // 指定继承源
  Target.prototype.super_class = Origin;
}

圣杯模式+IIFE+闭包

Teacher.prototype.name = 'Mr.Wang';
function Teacher() {}
function Student() {}

inherit(Student, Teacher);
var s = new Student();
var t = new Teacher();
console.log(t);
console.log(s);

var inherit = (function () {
	function Buffer() {}
	return function (Target, Origin) {
    Buffer.prototype = Origin.prototype;
    Target.prototype = new Buffer();
    // 还原构造器
    Target.prototype.constructor = Target;
    // 指定继承源
    Target.prototype.super_class = Origin;
  }
})();

⭐️ 圣杯模式 + call/apply 组合继承

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayHi = function() {
        console.log("sayHi");
    }
}

Person.prototype.eat = function() {
    console.log("eat");
}

function Student(name, age, score) {
    Person.call(this, name, age);
    this.score = score;
    this.study = function() {
        console.log("study");
    }
}

var inherit = (function () {
	function Buffer() {}
	return function (Target, Origin) {
    Buffer.prototype = Origin.prototype;
    Target.prototype = new Buffer();
    // 还原构造器
    Target.prototype.constructor = Target;
    // 指定继承源
    Target.prototype.super_class = Origin;
  }
})();

inherit(Student, Person);
var stu1 = new Student("Lance", 19, 100);
console.dir(stu1);

⭐️ 利用 Object.create

// 定义基类构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 在 Person 的原型上定义方法
Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

// 定义子类构造函数
function Student(name, age, major) {
  Person.call(this, name, age); // 调用父类构造函数
  this.major = major;
}

// 设置原型链
Student.prototype = Object.create(Person.prototype);

// 修正 constructor 引用
Student.prototype.constructor = Student;

// 在 Student 的原型上定义方法
Student.prototype.study = function() {
  console.log(`${this.name} is studying ${this.major}.`);
};

// 使用子类构造函数创建实例
const student1 = new Student('Alice', 22, 'Computer Science');
student1.sayHello(); // 输出: Hello, my name is Alice and I am 22 years old.
student1.study();    // 输出: Alice is studying Computer Science.

链式操作 - return this

var obj = {
	morning: function() {
  	console.log('早上');
    return this;
  },
  noon: function() {
  	console.log('中午');
    return this;
  },
  night: function() {
  	console.log('晚上');
    return this;
  }
}

obj.morning().noon().night();