这篇文章主要介绍了javascript借用构造函数的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
成都创新互联主营林周网站建设的网络公司,主营网站建设方案,成都APP应用开发,林周h5小程序制作搭建,林周网站营销推广欢迎林周等地区企业咨询借用构造函数
为了解决原型中包含引用类型值所带来问题,开发人员开始使用一种叫做借用构造函数(constructor stealing)的技术。
有时候也叫伪造对象或者经典继承。
这种技术的基本思想非常简单,即在子类型构造函数内部调用超类型构造函数。
函数只不过是在特定环境中的执行代码的对象,因此通过使用apply()和call()方法也可以在新创造的对象上执行构造函数。
function SuperType() { this.colors = ["red","blue","green"]; } function SubType() { //继承了SuperType SuperType.call(this); } var instance1 = new SubType(); instance1.colors.push("black"); console.log(instance1.colors); //["red","blue","green","black"] var instance2 = new SubType(); console.log(instance2.colors); //["red","blue","green"]
注意,这一段代码“借调”了超类型的构造函数。
function SubType() { //继承了SuperType SuperType.call(this); }
通过使用call()方法(或apply()方法也可以),实际上是在将要创建的SubType实例对象的环境下调用了SuperType构造函数。
这样一来,就会在新SubType对象上,执行SuperType()函数中定义的所有对象初始化代码。
所以,SubType的每个实例对象都有具有自己的colors属性的副本了
传递参数
相对于原型链而言,借用构造函数有一个很大的优势,就是可以在子类型构造函数中向超类型构造函数传递参数。
function SuperType(name) { this.name = name; } function SubType(){ //继承了SuperType,同时还传递了参数 SuperType.call(this, "Shaw"); //实例属性 this.age = 18; } var instance = new SubType(); console.log(instance.name); // "Shaw" console.log(instance.age); // 18
以上代码中的SuperType只接受一个参数name,该参数会直接赋值给一个属性。
在SubType构造函数内部调用SuperType构造函数时,实际上是为SubType的实例对象设置了name属性(this的指向,跟执行上下文有关)。
为了确保SuperType构造函数不会重写子类型的属性,可以在调用超类型的构造函数后,再添加应该在子类型中定义的属性。
借用构造函数的问题
如果仅仅是借用构造函数,那么也将无法避免构造函数模式存在的问题。
方法都在构造函数中定义,函数的复用就无从说起了,每实例化一个对象,实质上都在每个实例对象上重新创建了一遍方法, 造成内存和资源的浪费。
而且,在超类型的原型中定义的方法,对子类型而言也是不可见的(因为这里没用原型对象,实际上子类型的原型链指向了Object), 结果所有类型都只能使用构造函数模式。
感谢你能够认真阅读完这篇文章,希望小编分享的“javascript借用构造函数的示例分析”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。