美文网首页
2018-12-05 原生js的几种继承实现(亲测)

2018-12-05 原生js的几种继承实现(亲测)

作者: 小猪夫人hj | 来源:发表于2018-12-16 16:43 被阅读0次

1 原型链继承
父类
function Farther(){
this.name='hj';
this.sayName = function(){
console.log(this.name);
return null;
}

}
Farther.prototype.age = 40;
子类1
function Son1(height){
this.height = height;
}
//这两句是重点
Son1.prototype = new Farther;
Son1.prototype.constructor = Son1;
//
var s1 = new Son1('178');
s1.sayName (); //hj
s1.age; //40
-----------------------------------------示例图片:------------------------------------------

原型链.png
缺点:
不能给父类传参数;
父子构造函数的原型对象之间有共享问题;

2 构造函数继承
call/apply
父类:
function Farther(name){
this.name=name;
this.height = '178';
this.sayName = function(){
console.log(this.name);
return null;
}

}
Farther.prototype.age = 40;
子类:
function Son2 (name){
//这句是重点
Farther.call(this,name)
或者 Farther.apply(this,[name])
}
var s2 = new Son2('hj');
s2.sayName(); //hj
s2.height; //178
s2.age; //undefined

-----------------------------------------示例图片:------------------------------------------


构造函数继承.png

缺点:
可以传参,也不共享,但是,获取不到父类原型属性;

3 冒充对象继承
父类:
function Farther() {
this.name = 'hj';
this.height = '178';
}

Farther.prototype.age = 40;
子类:
function Son3(){
//这一块是重点
var tem = new Farther();
for(var key in tem){
if(tem.propertyIsEnumerable(key)){
this[key] = tem[key]
}
}
tem = null;
}
var s3 = new Son3();
s3.name; //hj
s3.height; //178
s3.age; //undefined
-----------------------------------------示例图片:------------------------------------------

冒充对象.png
缺点:
可以获取父类公有和私有属性,但是不能传参,也获取不到父类原型属性

4 原型式继承
父类:
function Farther() {
this.name = 'hj';
this.height = '178';
}

Farther.prototype.age = 40;
子类:
function Son4(){
}
//这句是重点
Son4.prototype = Farther.prototype;
var s4 = new Son4();
s4.name; //
s4.height; //
s4.age; //40
-----------------------------------------示例图片:------------------------------------------

原型式继承.png
缺点:
成员共享问题;
只能继承原型属性;

5 原型和构造函数组合
既可以获取父类对象属性和原型属性
-----------------------------------------示例图片:------------------------------------------


原型式继承+构造函数继承组合.png

6 寄生组合继承
给Son5.prototype = _______________ 这部分加一个壳子即
Son5.prototype = Create(Farther.prototype); //Create is a function
function Create(tem){
function fn = {};
fn.prototype = new tem;
return new fn;
}
-----------------------------------------示例图片:------------------------------------------


寄生组合继承.png

相关文章

  • 2018-12-05 原生js的几种继承实现(亲测)

    1 原型链继承父类:function Farther(){this.name='hj';this.sayName ...

  • JS继承的几种方式

    关于Js继承的几种方式,总结一下,以便查看。 第一种 prototype 引用型原型继承 语言支持:js原生支持的...

  • 打造专属插件之EasySliderBar

    这是一款简单易用的 Slider Bar,原生 HTML + CSS + JS 编写, 亲测兼容 Chrome, ...

  • JS继承

    JS继承的几种实现方式 继承是指子类继承父类的属性和方法,要实现继承,首先我们需要有一个父类 原型链继承 原型链继...

  • js数组去重的几种方法。

    在项目中偶尔会用到数组,通过原生js去除数组的重复项。简单的记下几种方法,亲测可用。。 第一种方法: 第一种方法是...

  • 前端菜鸟成长记(三)之answer

    关于上次作业的答案 js有几种实现继承的方法(我直接给答案,原型链继承,借用构造函数继承,组合继承)?各自的优缺点...

  • 彻底弄清js继承的几种实现方式

    js有几种经典的继承方式。比如原型链继承、构造函数继承、组合继承、寄生组合继承、ES6继承。让我们一一分析并实现。...

  • 我碰到的前端面试题(js)

    1.js实现继承有哪几种方法? 方法一:原型链继承 方法二: 构造函数继承 方法三: 组合继承 2.this指向问...

  • js实现继承的几种方式

    js实现继承有几种方式,这里我们主要探讨 原型链继承 构造继承 组合继承(原型链和构造继承组合到一块,使用原型链实...

  • JS实现继承的几种方式

    https://www.cnblogs.com/humin/p/4556820.html

网友评论

      本文标题:2018-12-05 原生js的几种继承实现(亲测)

      本文链接:https://www.haomeiwen.com/subject/oibwcqtx.html