JavaScript 继承

前端 · 2020-08-11 ·

1.1 概述

ES6 之前并没有给我们提供extends继承。我们可以通过构造函数+原型对象模拟实现继承。

1.2 call方法

function fn(x,y) {
    console.log("this指向的是:" + this);
    console.log(x+y);
}
var obj = {
    name: "obj"
}
fn(); // this指向的是:[object Window]
fn.call(); // this指向的是:[object Window]
fn.call(obj,2,3); //this指向的是:[object Object]

1.3 借用构造函数继承父类型属性

核心原理:通过call()把父类型的this指向子类型的this,这样就可以实现子类继承父类型的属性。

//借用父构造函数继承属性
//1. 父构造函数
function Father(uname, uage) {
    // this 指向父构造函数的对象实例
    this.uname = uname;
    this.uage = uage;
}
//2. 子构造函数
function Son(uname, uage, usex) {
    // this 指向子构造函数的对象实例
    Father.call(this, uname, uage);
    this.usex = usex;
}
var son = new Son("阿猫", 22, "男");
console.log(son);

1.4 借用原型对象继承方法

//借用父构造函数继承属性
//1. 父构造函数
function Father(uname, uage) {
    // this 指向父构造函数的对象实例
    this.uname = uname;
    this.uage = uage;
}
Father.prototype.eat = function() {
    console.log("我要吃东西");
}
//2. 子构造函数
function Son(uname, uage, usex) {
    // this 指向子构造函数的对象实例
    Father.call(this, uname, uage);
    this.usex = usex;
}
// Son.prototype = Father.prototype; 这样直接赋值,父原型对象会因子原型对象的改变而该改变
Son.prototype = new Father(); // 如果利用对象修改了原型对象,需要利用constructor 指回原来的构造函数
Son.prototype.constructor = Son;
Son.prototype.exam = function() {
    console.log("我要考试");
}
var son = new Son("阿猫", 22, "男");
console.log(son);
console.log(Father.prototype);
console.log(Son.prototype);

%