- 所在位置：
- 首页 >
- 编程技术 >
- JavaScript >
- JavaScript实现继承的方法有什么，原理怎么理解
JavaScript实现继承的方法有什么，原理怎么理解
Admin 2022-12-01 群英技术资讯 224 次浏览
在这篇文章中我们来了解一下“JavaScript实现继承的方法有什么，原理怎么理解”，一些朋友可能会遇到这方面的问题，对此在下文小编向大家来讲解，内容详细，易于理解，希望大家阅读完这篇能有收获哦，有需要的朋友就往下看吧！
1 .对象冒充
原理: 构造函数使用this关键字给所有属性和方法赋值, 因为构造函数只是一个函数,所以可以使ClassA的构造函数成为classB的方法,然后调用它.这样classB就会收到classA的构造函数中定义的属性和方法.例子:
function classA(name)
{
this.name=name;
this.showName=function(){alert(this.name);}
}
function classB(name)
{
this.newMethod = classA;
this.newMethod(name);
}
obj = new classA("hero");
objB = new classB("dby");
obj.showName(); // print hero
objB.showName(); // print dby 说明classB 继承了classA的方法.
对象冒充可以实现多重继承 例如
function classz(){
this.newMethod = classX;
this.newMethod();
delete this.newMethod;
this.newMethod=classY;
this.newMethod():
delete this.newMethod;
}
但是如果classX和classY有相同的属性或者方法,classY具有高优先级.
2.call()方法
call方法使与经典的对象冒充法就相近的方法,它的第一个参数用作this的对象,其他参数都直接传递给函数自身.
function sayName(perfix)
{
alert(perfix+this.name);
}
obj= new Object();
obj.name="hero";
sayName.call(obj,"hello," );
function classA(name)
{
this.name=name;
this.showName=function(){alert(this.name);};
}
function classB(name)
{
classA.call(this,name);
}
objB = new classB("bing");
objB.showName();////说明classB继承classA的showName方法
3.apply()方法
aplly()方法有2个参数,一个用作this对象,一个使传递给函数的参数数组.
function sayName(perfix)
{
alert(perfix+this.name);
}
obj= new Object();
obj.name="hero";
sayName.aplly(obj,new Array("hello,") );
4. 原型链
prototype对象的任何属性和方法都会被传递给对应类的所有实例,原型链就是用这种方式来显现继承.
function classA (){}
classA.prototype.name="hero";
classA.prototype.showName=function(){alert(this.name)}
function classB(){}
classB.prototype=new classA();
objb = new classB()
objb.showName();//print hero 说明b继承了a的方法
这里需要注意 调用classA的构造函数时,没有给它传递参数,这是原型链的标准做法,确保函数的构造函数没有任何参数.
并且 子类的所有属性和方法,必须出现在prototype属性被赋值后,应为在它之前赋的值会被删除.因为对象的prototype属性被替换成了新对象,添加了新方法的原始对象将被销毁.
5 混和方式
就是用冒充方式 定义构造函数属性,用原型法定义对象方法.
function classA(name)
{
this.name=name;
}
classA.prototype.showName=function(){alert(this.name)}
function classB(name)
{
classA.call(this,name);
}
classB.prototype = new classA();
classB.prototype.showName1=function(){alert(this.name+"*****");};
obj = new classB("hero");
obj.showName();
obj.showName1();
在classB的构造函数中通过调用call方法 继承classA中的name属性,用原型链来继承classA的showName方法.
到此，关于“JavaScript实现继承的方法有什么，原理怎么理解”的学习就结束了，希望能够解决大家的疑惑，另外大家动手实践也很重要，对大家加深理解和学习很有帮助。如果想要学习更多的相关知识，欢迎关注群英网络，小编每天都会给大家分享实用的文章!
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
猜你喜欢
-
puppeteer库如何安装和使用，能用做什么？
这篇我们来了解Node.js中puppeteer库如何安装和使用，以及能用做什么？文中的介绍很详细，有具体示例供大家参考，对大家学习和了解puppeteer库的使用有帮助，感兴趣的朋友就继续往下看吧。
-
用vant-UI库修改样式无效怎么办，怎样解决
这篇文章主要介绍了解决vant-UI库修改样式无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
-
用jQuery如何做消息提醒闪烁的效果？
这篇文章给大家分享的是用jQuery实现消息提醒闪烁的效果。消息提醒闪烁我们在很多网站或是涉及软件上都见过，那么如何自己动手实现这个效果呢？文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。
-
Repeater控件的基本使用是怎样，如何对数据绑定
这篇文章介绍了ASP.NET实现Repeater控件数据绑定的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
-
路由守卫是什么，vue-router如何实现路由守卫
这篇文章主要介绍了vue-router钩子函数实现路由守卫，对vue感兴趣的同学，可以参考下
推荐内容
成为群英会员,开启智能安全云计算之旅
立即注册
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008
