准备之JavaScript实现继承的常用方法

/**
 * JavaScript实现继承的常用方法有哪些？你推荐的是哪一种？
 * 1.原型链
 *   基本思想：利用原型让一个引用类型继承另一个引用类型的属性和方法
 * 
 *   JS中构造函数、实例对象和原型对象三者之间的关系：
 *       构造函数.prototype-->原型对象
 *       原型对象.constructor--> 构造函数
 *       实例对象 = new 构造函数() 
 *       实例对象.__proto__ --> 原型对象
 *   存在问题：   
 *       1.包含引用类型值的原型属性被所有实例共享，这会导致对一个实例修改会影响另一个实例
 *       2.在创建子类实例时，不能向父类的构造函数传递参数
 * 2.借用构造函数
 *    基本思想：在子类的构造函数中，通过 apply () 或 call ()的形式，调用父类构造函数，以实现继承。
 *    弊端：无法实现函数复用  因为它只是改变了this指向，原型对象还是自己的原型对象，并不是所继承的对象的原型对象，
 *         所以被继承原型对象的原型对象上的方法与属性，访问不到
 * 3.组合继承 √
 *    基本思想：使用原型链实现对原型方法的继承，而通过借用构造函数来实现对实例属性的继承
 *    有点：既通过在原型上定义方法实现了函数的复用，又能够保证每个实例都有它自己的属性
 * */


//1.原型链继承
// function SupperType(name) {
//     this.name = name;
//     this.property = 'SupperType->property';
//     this.colors = ['red', 'green'];
// }
// SupperType.prototype.getSupperTypeValue = function() {
//     return this.property;
// }

// function SubType() {
//     this.subProperty = 'SubProperty->property';
// }
// SubType.prototype = new SupperType('测试');
// SubType.prototype.getSubPropertyValue = function() {
//     return this.SubProperty;
// };
// var value = new SubType();
// console.log(SubType.prototype.constructor === SubType);
// console.log(value.__proto__ === SubType.prototype); //true  
// console.log(value.getSupperTypeValue()); //SupperType->property
// // 问题1演示
// var a = new SubType();
// a.colors.push('black');
// console.log(a)
// var b = new SubType();
// console.log(b)
// console.log(b.colors) //[ 'red', 'green', 'black' ]
// console.log(a.name) //测试


// 借用构造函数  
// function SupperType(name) {
//     this.name = name;
//     this.property = 'SupperType->property';
//     this.colors = ['red', 'green'];
// }
// SupperType.prototype.getSupperTypeValue = function() {
//     return this.property;
// }
// SupperType.prototype.age = '18';

// function SubType(name) {
//     this.subProperty = 'SubProperty->property';
//     SupperType.call(this, name);
//     this.property = '11'; //
// }
// var s = new SubType('zs');
// var s2 = new SubType('zs2');
// console.log(s);
// console.log(s.name); //zs
// console.log(s2.name); //zs2
// console.log(s.property); //SupperType->property
// console.log(s.subProperty); //SubProperty->property
// // console.log(s.getSupperTypeValue()); // s.getSupperTypeValue is not a function
// console.log(s.age); //undefined
// console.log(SubType.prototype); // SubType
// console.log(SubType.prototype.constructor); // SubType



// 组合继承
// function SupperType(name) {
//     this.name = name;
//     this.colors = ['red', 'green'];
// }
// SupperType.prototype.sayName = function() {
//     return this.name;
// }

// function SubType(name, age) {
//     SupperType.call(this, name);
//     this.age = age;
// }
// SubType.prototype = new SupperType();
// var sub1 = new SubType('name->sub1');
// sub1.colors.push('yellow');
// console.log(sub1);
// console.log(sub1.colors); //['red', 'green','yellow']
// console.log(sub1.sayName()); //name->sub1
// var sub2 = new SubType('name->sub2');
// console.log(sub2.colors); //['red', 'green']
// console.log(sub2.sayName()); //name->sub2