JavaScript 之 面向对象 [ 继承 ]

继承

描述

• 在一个构造函数或对象中定义的属性或方法，可以在另一个构造函数或对象中直接使用，而不需要在去重新定义

原型链

• 一个构造函数或对象的原型指向另一个构造函数或对象，以此类推形成一条链状结构，这种效果被称为原型链
• 这种原型链也可以称为 继承

/* 定义第一个构造函数 */
function A(){
    this.a = 'a';
}
/* 创建对象 */
var a = new A();

/* 定义第二个构造函数 */
function B(){
    this.b = 'b';
}
/* 将B的原型指向对象a */
B.prototype = a;
/* 创建对象 */
var b = new B();

console.log( b.b );// 显示 b
console.log( b.a );// 显示 a

/* 定义第三个构造函数 */
function C(){
    this.c = 'c';
}
/* 将C的原型指向对象b */
C.prototype = b;
/* 创建对象 */
var c = new C();

console.log( c.c );// 显示 c
console.log( c.b );// 显示 b
console.log( c.a );// 显示 a

只继承于原型

• 一个构造函数的原型指向另一个构造函数的原型
• 可以理解为原型链的一种优化（个人理解）

/* 定义第一个构造函数 */
function A(){
    // 将自有属性改写为原型属性
    // this.a = 'a';
}
A.prototype.a = 'a';

/* 定义第二个构造函数 */
function B(){
    // this.b = 'b';
}

/* 将B的原型指向A的原型 */
B.prototype = A.prototype;
/*
    将B的自有属性改写成原型属性
     * 要先去执行原型的指向
     * 在去改写属性
     * 如果代码的执行顺序反过来会变成对属性的重新赋值
 */
B.prototype.b = 'b';

/* 定义第三个构造函数 */
function C(){
    this.c = 'c';
}
/* 将C的原型指向B的原型 */
C.prototype = B.prototype;
/* 创建对象 */
var c = new C();
console.log(c.c);// 显示 c
console.log(c.b);// 显示 b
console.log(c.a);// 显示 a

原型式继承

• 定义一个函数，在该函数中创建一个构造函数，再将构造函数创建的对象返回，用于实现继承

/* 定义一个函数 */
function fun( obj, values ) {
    /* 定义一个构造函数 */
    function Fn() {
        /* 遍历构造函数的属性和方法 */
        for ( var key in values ) {
            this[key] = values[key];
        }
    }
    /* 将函数的参数当做构造函数的原型 */
    Fn.prototype = obj;
    /* 将构造函数创建的对象做为函数的返回值 */
    return new Fn();
}
/* 定义一个对象 */
var obj = {
    name : '唐三'
}
/* 调用函数 - 将构造函数的自有属性或方法以参数传入 */
var f = fun( obj, {
    nian : 20,
    menpai : function () {
        console.log( '唐门' );
    }
} );
/* 调用属性和方法 */
console.log( f.name );// 显示 唐三
console.log( f.nian );// 显示 20
f.menpai();// 显示 唐门

Object.create()方法

• 使用Object.create()方法也可以实现继承

/* 定义一个对象 */
var obj1 = {
    name : '融念冰'
}
var s = Object.create( obj1, {
    /* 定义属性或方法时，值需要以对象的形式表示 */
    nian : {
        value : 20
    }
} );
/* 调用属性 */
console.log( s.name );// 显示 融念冰
console.log( s.nian );// 显示 20

借助构造函数

• 可用过在子级的构造函数中调用父级的构造函数，来实现继承效果

/* 定义父级构造函数 */
function Fun() {
    /* 这里的this指向调用的参数 */
    this.fuji = '哈哈哈';
}

/* 定义子级构造函数 */
function Fn() {
    /* 在子级构造函数中调用父级构造函数中的属性 */
    Fun.apply( this );// 这里的this指向当前构造函数的对象（构造函数Fn）
    /* 这里的this表示当前调用属性的对象 */
    this.ziji = '呀呀呀';
}
/* 创建子级对象 */
var ziji = new Fn();
console.log( ziji );// 显示 Fn { fuji: '哈哈哈', ziji: '呀呀呀' }

组合式继承

• 将原型式继承和借助构造函数式继承有效的结合在一起
• 分开继承自有属性和原型属性

/* 定义父级构造函数 */
function Fun() {
    /* 这里的this指向调用的参数 */
    this.name = '唐三';
}
/* 添加原型属性 */
Fun.prototype.nian = 20;

/* 定义子级构造函数 */
function Fn() {
    /* 在子级构造函数中调用父级构造函数中的属性 - 继承父级的自有属性 */
    Fun.apply( this );// 这里的this指向当前构造函数的对象（构造函数Fn）
    /* 这里的this表示当前调用属性的对象 */
    this.menpai = '唐门';
}
/* 继承父级的原型属性 */
Fn.prototype = Fun.prototype;

/* 创建子级对象 */
var ziji = new Fn();
/* 调用属性 */
console.log( ziji.name );// 显示 唐三
console.log( ziji.nian );// 显示 20
console.log( ziji.menpai );// 显示 唐门