辉太郎看前端(继承)

前言：

继承在js中能起到很大的作用，并且继承有很多种方式，接下来我就列举几种常见的继承方法。

列举的几种继承

原型链继承
构造函数继承
组合继承
es6中的class继承

原型链继承

子类不能向父类构造函数中传参，可以调用原型上的方法

function Father(name,age){this.name=name;this.age=age;//本身的方法this.say=function(){console.log(`${this.name} ${this.age}`)}}//原型方法Father.prototype.test=function(){console.log("我是原型上的方法")
}function Son(){this.sex="男"
}//将父类实例赋值给子类原型
Son.prototype=new Father("灰太狼",10);
//子类实例
var obj =new Son("红太狼");
obj.say();
obj.test();

打印结果

构造函数继承

在子类内，使用call()调用父类方法，并将父类的this修改为子类的this。相当于把父类的实例复制了一份放到子类的函数内。能够继承父类本身的方法，不能继承父类原型上的方法。

//父类
function Father(name,age){this.name=name;this.age=age;//本身的方法this.say=function(){console.log(`${this.name} ${this.age}`)}}//原型方法Father.prototype.test=function(){console.log("我是原型上的方法")
}
//子类
function Son(){//在子类内,使用call()调用父类方法,并将父类的this修改为子类的this.
//相当于是把父类的实例属性复制了一份放到子类的函数内.Father.call(this);this.name="喜羊羊";this.age=11;this.sex="男"
}
//子类实例
var obj =new Son();
obj.say();
obj.test();

打印结果

组合继承

既能继承父类自身属性和方法，也能继承父类原型方法

//父类
function Father(name,age){this.name=name;this.age=age;//本身的方法this.say=function(){console.log(`${this.name} ${this.age}`)}}//原型方法Father.prototype.test=function(){console.log("我是原型上的方法")
}
//子类
function Son(name,age,sex){Father.call(this,name,age);this.sex=sex;
}
//将父类实例赋值给子类原型
Son.prototype=new Father()
var obj=new Son("小灰灰",20,"男");
obj.say();
obj.test();

打印结果

es6中的class继承

通过关键字extends实现父类继承，通过super关键字实现方法和属性的继承。在定义方法时不能加function,方法全部定义在prototype原型中。

//父类
class Father{constructor(name,age){this.name=name;this.age=age;}//方法eat(){console.log(`${this.name}${this.age}`)}
}
//子类//继承父类
class Son extends Father{constructor(name,age){//继承父类属性super(name,age)}eat(){//继承父类方法super.eat()}
}var obj =new Son("小灰灰",35);
obj.eat()

打印结果

总结：

es6中class不存在变量提升，要先定义在使用，es5中存在变量提升，可以先使用后定义。

辉太郎看前端(继承)相关推荐

辉太郎看前端(博客目录导航)
前言人的一生,有许多事情,是需要放在心里慢慢回味的,过去的就莫要追悔,一切向前看吧任何打击都不足以成为你堕落的借口,即使你改变不了这个世界,你却依然可以改变自己,选择条正确的路永远走下去. 你多学 ...
辉太郎看前端(for...in和for...of)
for-in和for-of的区别: 一句话for-in循环出来的是key值,for-of循环出来的是数据的值 ①循环数组,for-in循环出来的是key值,for-of循环出来的是数据的值. ②循环对 ...
辉太郎看前端(js异步宏任务和微任务)
前言宏任务:setTimeout,setInterval,Ajax,DOM事件微任务:Promise,async/await. 优先级:微任务执行要比宏任务要早. 注: 同步任务会和微任务按照出场 ...
辉太郎看前端(query和params)
前言 query和params都是一种传参方式,只是有些许不同而已. 在说两者之前,我们首先要知道$router和$route的是什么. $router和$route $router 是路由操作对象, ...
辉太郎看前端(查找出字符串或数组中出现次数最多的字符)
前言利用字符串中的方法charAt(),返回指定下标位置的字符字符串 // 1.统计次数var str = 'XMLHttpRequest';// 创建了一个空的对象,存储字符串中的每个字符.属性 ...
辉太郎看前端(xss，sql，CSRF)
前言网络安全也是开发过程中我们必须要考虑的. xss xss全称(cross-site scripting),xss攻击方式是攻击者往web页面里边插入恶意html或者javascript代码. 防 ...
周末带女儿看《喜羊羊与灰太郎之虎虎生威》的一点点感触
那就是"业精于专,功于勤". 整个动画片,最终解决战斗的,是[红太郎]的[平底锅]. 而红太郎,能在极高速度,极远距离准确命中[灰太郎]的原因,就是每天都要修炼N+1次[平底锅大法 ...
精彩生活：日系景太郎的故事
故事从男主角浦岛景太郎第三次考大学落榜开始,直接就让本来抱有"美少年至高论"的女性观众出局,失去了继续观赏这部动画的兴趣--没有流川枫,也没有阿斯兰,就连卡卡西都没有,单靠&quo ...
DOM案例-锅打灰太郎
查看效果逐行代码注释如下: <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...

辉太郎看前端(继承)

前言：

继承在js中能起到很大的作用，并且继承有很多种方式，接下来我就列举几种常见的继承方法。

列举的几种继承

原型链继承

构造函数继承

组合继承

es6中的class继承

原型链继承

打印结果

构造函数继承

打印结果

组合继承

打印结果

es6中的class继承

打印结果

总结：

es6中class不存在变量提升，要先定义在使用，es5中存在变量提升，可以先使用后定义。

辉太郎看前端(继承)相关推荐

最新文章

热门文章