function fun(o){ function F(){} F.prototype = o; return new F(); } let obj = {a:[11,22]} function createAnother(z) { // 通过调用函数创建一个新对象 var clone = fun(z); clone.sayHi = function () { alert("hi"); } return clone; } createAnother(obj)
上面的例子中,我们把obj传入createAnother()函数中,返回的新对象clone不仅拥有了该属性,而且还被增强了,拥有了sayHi()方法;
等一下,这里要注意: 使用寄生式继承来为对象添加函数, 会由于不能做到函数复用而降低效率;这一点与构造函数模式类似.
5.寄生组合式继承
前面讲过,组合继承是 JavaScript 最常用的继承模式; 不过, 它也有自己的不足. 组合继承最大的问题就是无论什么情况下,都会调用两次父类构造函数: 一次是在创建子类型原型的时候, 另一次是在子类型构造函数内部. 寄生组合式继承就是为了降低调用父类构造函数的开销而诞生的
基本思想:不必为了指定子类型的原型而调用超类型的构造函数
function inheritPrototype(subType, superType) { var protoType = Object.create(superType.prototype); //创建对象 protoType.constructor = subType; //增强对象 subType.prototype = protoType; //指定对象 } function Father(name) { this.name = name; this.colors = ["red", "blue", "green"]; } Father.prototype.sayName = function () { console.log(this.name); } function Son(name, age) { Father.call(this, name); this.age = age; } inheritPrototype(Son, Father) Son.prototype.sayAge = function () { console.log(this.age); } var instance = new Son("uzi", 3); instance.sayName(); //uzi instance.sayAge(); //3
inheritPrototype函数接收两个参数：子类型构造函数和超类型构造函数。
1. 创建超类型原型的副本。
2. 为创建的副本添加constructor属性，弥补因重写原型而失去的默认的constructor属性
3. 将新创建的对象（即副本）赋值给子类型的原型
inheritPrototype的高效率体现在它没有调用superClass构造函数,因此避免了在subClass.prototype上面创建不必要多余的属性. 同时,原型链还能保持不变,可以说是相当奈斯
由于寄生组合式继承,集寄生式继承和组合继承的优点于一身,是实现基于类型继承的最有效方法.
八.vue构造函数
我们在使用的vue的时候,经常会用new操作符去将他实例化,这说明vue也是一个构造函数,那么他是如何被创建的呢?我怀着无比激动的心情clone了vue的源码,仔细研究了一番
vue源码地址
我首先找到了src/core/instance/index.js文件,打开一看,惊了
在第八行代码中,创建了一个Vue的函数,这不就是Vue的构造函数么,而且在12行的警告中我更加肯定了,他说:Vue是一个构造函数，应该使用“new”关键字调用
然后他在下面,他分别在
initMixin()
stateMixin()
eventsMixin()
lifecycleMixin()
renderMixin()
这五个方法中讲Vue作为形参传入,最后将Vue导出.
那么这五个方法是干什么的呢?我们先来看看initMixin()方法,打开./init.js文件,找到该方法
其他的代码我们先不管,我们就看该方法的前几行,他在Vue的原型中注入了_init方法,这个方法有点眼熟,我们好像在哪见过,对,就是刚才的index.js文件中
这个this_init(options)看上去像是一个内部初始化的一个方法,而option应该就是初始化时的一些配置项了,在Vue被实例化的时候,this._init()方法就会执行
接下来,我们来看一下./state.js文件,找到stateMixin方法
总结
以上所述是小编给大家介绍的js原型链和vue构造函数，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: