[h1]js 有没有类的概念，js 的继承是怎样的?[/h1]本身不提供一个实现，（即使在中引入了关键字,但那只是语法糖,仍然是基于原型的）,本质上是一个函数。- class Person {}Person instanceof Function; //true
[h1]几种继承方式[/h1]先定义一个父类- function Person(name) { this.name = name || "小明"; this.color = ["blue", "yellow"]; this.sleep = function() { console.log(this.name + "正在睡觉"); };}Person.prototype.eat = function(food) { console.log(this.name + "正在吃：" + food);};
- function Man() {}Man.prototype = new Person(); //实现了原型链继承let xiaoLi = new Man();Person.prototype.happy = function() { console.log(this.name + "好()嗨哦");};xiaoLi.sleep(); // '小明正在睡觉'xiaoLi.happy(); //小明好()嗨哦Man.prototype.name = "小李";xiaoli.sleep(); // '小李正在睡觉'xiaoLi.eat("苹果"); // '小李正在吃'
缺点:
- 可以在子类中增加实例属性，如果要新增加原型属性和方法需要在 new 父类构造函数的后面
- 无法实现多继承
- 创建子类实例时不能向父类的构造函数传参数
- let xiaoLi = new Man('小李')
- Man.prototype.name = '小李';
[h2]2 借助构造函数（经典继承）[/h2]- function Man(name) { Person.call(this); this.name = name || "小亮";}let xiaoLi = new Man("小李");xiaoLi.sleep(); //小李在睡觉xiaoLi.eat("苹果"); //VM525:1 Uncaught TypeError: xiaoLi.eat is not a function
- 解决了子类构造函数向父类构造函数中传递参数
- 可以实现多继承（call 或者 apply 多个父类）
缺点:
- 方法都在构造函数中定义，无法复用
- 不能继承原型属性/方法，只能继承父类的实例属性和方法
[h2]3 组合继承[/h2]也叫做伪经典继承，是利用原型链和借用构造函数的技术组合在一起从而发挥两者之长的一种继承模式。思路是使用原型链实现对原型属性和方法的继承，而通过构造函数来实现对实现对实例属性的继承，这样。既通过在原型上定义方法实现复用，又能保证每个实例都有它自己的属性- function Man(name) { // 继承属性 Person.call(this); this.name = name || "小亮";}// 继承方法Man.prototype = new Person();Man.prototype.constructor = Person;Man.prototype.sayHello = function() { console.log(this.name + "hello");};let xiaoLi = new Man("小李");xiaoLi.sleep(); //小李在睡觉xiaoLi.sayHello(); //小李helloxiaoLi.color.push("black");console.log(xiaoLi.color); //["blue", "yellow","black"];let xiaoqiang = new Man("小强");iaoqiang.sleep(); //小强在睡觉iaoqiang.sayHello(); //小强helloconsole.log(iaoqiang.color); //["blue", "yellow"];
- xiaoLi instanceof Person; //true
- function createObj(o) { function F() {} F.prototype = o; return new F();}
缺点是：包含引用类型的属性值始终都会共享相应的值，这点跟原型链继承一样。我们来看一个例子- let person = { name: "小蔡", like: ["唱", "跳", "rap"]};let xiaoLi = createObj(person);let xiaoWang = createObj(person);xiaoLi.name = "小李";console.log(xiaoWang.name); //小蔡xiaoLi.like.push("篮球");console.log(xiaoWang.like); //["唱", "跳", "rap","篮球"]
[h2]5 寄生式继承[/h2]封装一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后返回这个对象- function createObj(obj) { var clone = Object.create(obj); clone.sayHi = function() { console.log("hi"); }; return clone;}let person = { name: "小蔡", like: ["唱", "跳", "rap"]};let xiaoLi = createObj(person);xiaoLi.sayHi(); //hi
[h2]6. 寄生组合式继承[/h2]组合继承的最大缺点就是他会调用两次父类的构造函数- function Man(name) { // 继承属性 Person.call(this); this.name = name || "小亮";}// 继承方法Man.prototype = new Person();Man.prototype.constructor = Person;Man.prototype.sayHello = function() { console.log(this.name + "hello");};let xiaoLi = new Man("小李");
- Man.prototype = new Person();
- let xiaoLi = new Man("小李");
- Parent.call(this, name); //调用夫类构造函数
- Man.prototype = new Person();
- function Person(name) { this.name = name || "小明"; this.color = ["blue", "yellow"];}Person.prototype.sleep = function() { console.log(this.name + "正在睡觉");};function Man(name, age) { Person.call(this, name); this.age = age;}// 关键的三步var F = function() {};F.prototype = Person.prototype;Man.prototype = new F();var xiaoLi = new Man("小李");
- function object(o) { function F() {} F.prototype = o; return new F();}function prototype(child, parent) { var prototype = object(parent.prototype); prototype.constructor = child; child.prototype = prototype;}// 使用：prototype(Child, Parent);
- function Person(name) { this.name = name || "小明"; this.color = ["blue", "yellow"];}Person.prototype.sleep = function() { console.log(this.name + "正在睡觉");};function Man(name, age) { Person.call(this, name); this.age = age;}prototype(Man, Person);let xiaoXia = new Man("小霞", 22);xiaoxia.sleep(); //小霞正在睡觉xiaoxia.age; //22
[h2]7 es6 Class 继承[/h2]- class A {}class B extends A { constructor() { super(); }}
[h1]总结[/h1]以上就是 Js 继承的所有实现了，如文中有误，欢迎指出
[h1]参考资料[/h1]- Class 的继承-阮一峰
- js 继承的几种方式- 任博
- JavaScript 深入之继承的多种方式和优缺点
- javascript 高级程序设计 162-174
觉得写的不错的老哥点个好看吧！
|
|
转播
