标签:Woman name 继承 age js 父类 class
JS 继承实现⽅式也很多,主要分 ES5 和 ES6 继承的实现 先说⼀下 ES5 是如何实现继承的 ES5 实现继承主要是基于 prototype 来实现的,具体有三种⽅法 ⼀是 原型链继承:
- 父类的实例作为子类的原型
function Woman(){
}
Woman.prototype= new People();
Woman.prototype.name = 'haixia';
let womanObj = new Woman();
即 B . prototype = new A ()
优点:
- 简单易于实现,父类的新增的实例与属性子类都能访问
缺点:
-
可以在子类中增加实例属性,如果要新增加原型属性和方法需要在new 父类构造函数的后面
-
无法实现多继承
-
创建子类实例时,不能向父类构造函数中传参数
function B(name,age) {
A.call(ths,name,age)
}
function Woman(name){
//继承了People
People.call(this); //People.call(this,'tom);
this.name = name || 'kitty'
}
let womanObj = new Woman();
优点:
-
解决了子类构造函数向父类构造函数中传递参数
-
可以实现多继承(call或者apply多个父类)
缺点:
-
方法都在构造函数中定义,无法复用
-
不能继承原型属性/方法,只能继承父类的实例属性和方法
- 调用父类构造函数,继承父类的属性,通过将父类实例作为子类原型,实现函数复用
function People(name,age){
this.name = name || 'wangxiao'
this.age = age || 27
}
People.prototype.eat = function(){
return this.name + this.age + 'eat sleep'
}
function Woman(name,age){
People.call(this,name,age)
}
Woman.prototype = new People();
Woman.prototype.constructor = Woman;
let wonmanObj = new Woman(ren,27);
wonmanObj.eat();
缺点:
- 由于调用了两次父类,所以产生了两份实例
优点:
-
函数可以复用
-
不存在引用属性问题
-
可以继承属性和方法,并且可以继承原型的属性和方法
ES6 继承是⽬前⽐较新,并且主流的继承⽅式,⽤ class 定义类,⽤ extends 继承类,⽤ super () 表示⽗类 , 【下⾯代码部分只是熟悉,不⽤说课】 例如:创建 A 类代码量少,易懂
class A {
constructor() {
//构造器代码,new时⾃动执⾏
}
⽅法1( ) { //A类的⽅法 }
⽅法2( ) { //A类的⽅法 }
}
创建B类并继承A类
class B extends A {
constructor() {
super() //表示⽗类
}
}
实例化B类: var b1=new B( )
b1.⽅法1( )
//class 相当于es5中构造函数
//class中定义方法时,前后不能加function,全部定义在class的protopyte属性中
//class中定义的所有方法是不可枚举的
//class中只能定义方法,不能定义对象,变量等
//class和方法内默认都是严格模式
//es5中constructor为隐式属性
class People{
constructor(name='wang',age='27'){
this.name = name;
this.age = age;
}
eat(){
console.log(`${this.name} ${this.age} eat food`)
}
}
//继承父类
class Woman extends People{
constructor(name = 'ren',age = '27'){
//继承父类属性
super(name, age);
}
eat(){
//继承父类方法
super.eat()
}
}
let wonmanObj=new Woman('xiaoxiami');
wonmanObj.eat();
ES5继承和ES6继承的区别:
es5继承首先是在子类中创建自己的this指向,最后将方法添加到this中
Child.prototype=new Parent() || Parent.apply(this) || Parent.call(this)
es6继承是使用关键字先创建父类的实例对象this,最后在子类class中修改this
最后:
es6中很多代码的语法糖,很多方法简单易用。在浏览器兼容的情况下,改变原有方式。
虽然现在很多框架都是es6,但对于初学者还是建议多看看es5中实现的原理。
标签:Woman,name,继承,age,js,父类,class
来源: https://blog.csdn.net/A535366/article/details/120443163
本站声明:
1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。