js实现继承的方式
function Person() { this.name = 'aaa' this.info = { sex: 'boy', hobby: 'basket' } this.say = function () { console.log(111) } } Person.prototype.sing = function () { console.log(this.name) }
1、原型链继承
function Child() { this.age = '18' } Child.prototype = new Person() // => Child.prototype.__proto__ = Person.prototype (核心) console.log(Child.prototype) const child1 = new Child() child1.info.sex = 'women' // 指向得是同一个地址，这是Child得属性，修改后则其他同类也会获取到改变后得值（缺点） console.log(child1.name) child1.name = 'zs' // 简单类型，所以该操作为给自己添加属性，这是存在child1自己身上得数据 console.log(child1) const child2 = new Child() console.log(child2.info.sex) // women console.log(child2) // aaa (去的Child上得数据) /* 重点：让新实例的原型等于父类的实例。 特点：1、实例可继承的属性有：实例的构造函数的属性，父类构造函数属性，父类原型的属性。（新实例不会继承父类实例的属性！） 缺点：1、新实例无法向父类构造函数传参。 2、继承单一。 3、所有新实例都会共享父类实例的属性。（原型上的属性是共享的，一个实例修改了原型属性，另一个实例的原型属性也会被修改！） * */
2、构造函数继承
function Child(params) { Person.call(this, params) //核心 this.parent = 'ls' } const child1 = new Child() console.log(child1) // 没有原型链上没有sing方法 /* 重点：用.call()和.apply()将父类构造函数引入子类函数（在子类函数中做了父类函数的自执行（复制）） 特点：1、只继承了父类构造函数的属性，没有继承父类原型的属性。 2、解决了原型链继承缺点1、2、3。 3、可以继承多个构造函数属性（call多个）。 4、在子实例中可向父实例传参。 缺点：1、只能继承父类构造函数的属性。 2、无法实现构造函数的复用。（每次用每次都要重新调用） 3、每个新实例都有父类构造函数的副本，臃肿。 * */
3、组合式继承
const Child = function (params) { Person.call(this, params) this.parent = params } Child.prototype = new Person() const child1 = new Child('li') const child2 = new Child('ww') console.log(child1) console.log(child2) /* 重点：结合了两种模式的优点，传参和复用 特点：1、可以继承父类原型上的属性，可以传参，可复用。 2、每个新实例引入的构造函数属性是私有的。 缺点：调用了两次父类构造函数（耗内存），子类的构造函数会代替原型上的那个父类构造函数。 * */
4、原型式继承
function CreateObj(o){ function F(){} F.prototype = o; // console.log(o.__proto__ === Object.prototype); // console.log(F.prototype.constructor === Object); // true return new F(); } const person = { name: 'xiaopao', friend: ['daisy','kelly'], info: { ccc: 'ccc' } } let person1 = CreateObj(person); // var person2 = CreateObj(person); person1.name = 'person1'; // console.log(person2.name); // xiaopao person1.friend.push('taylor'); // console.log(person2.friend); // ["daisy", "kelly", "taylor"] // console.log(person); // {name: "xiaopao", friend: Array(3)} person1.friend = ['lulu']; person1.info.ccc = 'dddd' console.log(person1); console.log(person1.friend); // ["lulu"] console.log(person.friend); // ["daisy", "kelly", "taylor"] /* 重点：用一个函数包装一个对象，然后返回这个函数的调用，这个函数就变成了个可以随意增添属性的实例或对象。object.create()就是这个原理。 优点：类似于复制一个对象，用函数来包装。 缺点：1、所有实例都会继承原型上的属性。 2、无法实现复用。（新实例属性都是后面添加的) */
5、寄生式继承
const ob = {name:"小明",friends:['小花','小白']};
function object(o){
function F(){}//创建一个构造函数F
F.prototype = o;
return new F();
}
//上面再ECMAScript5 有了一新的规范写法，Object.create(ob) 效果是一样的
function createOb(o){
const newob = object(o);//创建对象
newob.sayName = function(){//增强对象
console.log(this.name);
}
return newob;//指定对象
}
const ob1 = createOb(ob);
console.log(ob1)
ob1.sayName();//小明
/*
重点：就是给原型式继承外面套了个壳子。
优点：没有创建自定义类型，因为只是套了个壳子返回对象（这个），这个函数顺理成章就成了创建的新对象。
缺点：没用到原型，无法复用。
* */
6、寄生组合式继承 （最好用的）
//寄生继承 创建一个新的对象返回一个新实例 function object(o){ function F(){} F.prototype = o; return new F(); } //父层，超级层 function Father(name){ this.name = name; this.friends= ["小花","小草"]; } Father.prototype.sayname = function(){ console.log(this.name); } function Child(name,age){ Father.call(this,name);//继承属性 this.age = age; } //继承父层的prototype function inheritPrototype(child,father){ var prototype = object(father.prototype);//返回一个新实例（对象） prototype.constructor = child;//增强对象 child.prototype = prototype; } inheritPrototype(Child,Father);//继承父层的原型 Child.prototype.sayage = function(){ console.log(this.age); } var c1 = new Child("小白",20); c1.friends.push("小小"); c1.sayname();//小白 c1.sayage();//20 var c2 = new Child("小蓝",23); c2.sayname();//小蓝 c2.sayage();//23 console.log(c2.friends);//"小花","小草" //重点：修复了组合继承的问题
7、class类继承
class Parent5 { constructor() { this.name = ['super5'] } reName() { this.name.push('new 5') } } class Child5 extends Parent5 { constructor() { super() } } const child51 = new Child5() const child52 = new Child5() console.log(child51) console.log(child52)
