弄懂js中的三种继承方式_类式继承,拷贝继承和原型继承

web前端和后台开发哪个难
前端难还是后台开发难
前端开发与后台开发的融合

1类式继承:所谓类式继承,就是通过父类创建一个类的实例,把子类的原型链通过等于这个类的实例的方式指向父类,从而子类就具有了属性和方法。实现继承
function Person(name,age){
this.name=name;
this.age=age
}
var p=new Person(); //所谓类式继承,就是通过父类创建一个类的实例,把子类的原型链等于这个类的实例,实现继承

function Student(name,age,className){
Person.call(this,name,age)
this.className=”two”
}

Student.prototype=p;
var s1=new Student(“sean”,20);
s1.eat()
但是,直接通过Student.prototype=p;是有问题的,对象是引用类型。它的赋值是会修改之前的对象,也就是说我们给Student的prototype添加或者修改方法。会使父级也相应添加或删除某些方法。那有没有解决的办法呢?当然。js的每个构造函数都有一个prototype属性,在prototype之下,都有不可枚举的属性constructor,constructor属性的值是一个函数对象,而且函数指向的正式构造函数(即创建该对象的那个函数),所以可以这样判断某个对象是否是某个构造函数的实例。那么我们只需要做这样的修改Student.constructor=Student。就可以了

2 原型继承
所谓原型继承:其实和类式继承很相识。只不过类式继承是通过把一个父对象的实例等于子类的原型prototype属性来实现,而 原型继承则是通过一个空函数来实现,也就是把父类的原型赋值给空函数,再把该空函数返回的一个实例对象等于子类的原型prototype属性
function Person(name,age){
this.name=name;
this.age=age
}

Person.prototype.eat=function(){
console.log(“eat”)
}

function Student(name,age,className){
Person.call(this,name,age)
this.className=”two”
}

function fn(){}
fn.prototype=Person.prototype;
Student.prototype=new fn();

var s1=new Student(“sean”,20);
s1.eat()

3 拷贝继承
拷贝继承很好理解。我们把父类的属性和方法通过拷贝的方式给子类即可
拷贝继承:1?继承哪些东西?
继承的是父类的属性和方法
属性如何继承? —-通过call,对象冒充的方式
方法如何继承? —-通过拷贝的方式,把父类的原型上的方法通过拷贝的方式复制到子类中,这样子类就具有了父类的所有方法
</body>
</html>
<script >

function Person(name,age){
this.name=name;
this.age=age;
}
Person.prototype.eat=function(){
console.log(“eat”)
}

function Student(name,age,className){
Person.call(this,age,name)
this.className=className
}

for(var attr in Person.prototype){
Student.prototype[attr]=Person.prototype[attr]
}

var s1=new Student();
console.log(s1.constructor)
s1.eat();

前端开发累还是后台开发累
前端简单还是后台开发
webgis开发的前端和后台
» 本文来自:前端开发者 » 《弄懂js中的三种继承方式_类式继承,拷贝继承和原型继承》
» 本文链接地址:https://www.rokub.com/8064.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!