关于原型链模式中的this和批量设置公有属性
2018-04-20 本文已影响3人
独立行走的蚂蚁
1.在原型模式中this常用的两种情况:
(1)在类中的this.xxx = xxx; this是当前实例
(2)某一个方法中的this,看执行的 时候“.”前面是谁,this就是谁
(3)原型链机制一步一步的查找
例:
function Fn () {
this.x = 100;
this.y = 200;
this.getY = function () {
console.log(this.y)
}
}
Fn.prototype = {
constructor: Fn,
y: 300,
getX: function () {
console.log(this.x)
},
getY: function () {
console.log(this.y)
}
};
var f = new Fn;
f.getX();
// 100 这时候的this是当前f console.log(f.x) 私有的有就不往下面找了
f._proto_.getX() // undefined 这时候的this是f._proto_ console.log(f._proto_.x) 忽略了私有的直接找公有的,这时候公有的没有.x的就是undefined
f.getY() //200
f._proto_.getY() //300
2.在内置类原型上面写实现数组去重的方法
Array.prototype.myUnique = function () {
var obj = {};
for (var i = 0; i<this.length;i++) {
var cur = this[i];
if (obj[cur] === cur) {
this[i] = this[this.length-1];
this.length--;
i--;
continue
}
obj[cur] = cur;
}
obj = null;
return this //目的是为了链式写法
};
var ary = [];
ary.myUnique()
3.原型链批量设置公有的属性
3.1起一个别名
function Fn () {
this.x = 200;
}
var pro = Fn.prototype;
//把原来原型指向的地址赋值给pro,现在它们操作的是同一个内存空间
pro.getX = function () {};
pro.getY = function () {};
pro.getZ = function () {};
var f1 = new Fn;
3.2重构原型对象的方式
function Fn () {
this.x = 200;
}
Fn.prototype = {
a: function () {},
b: function () {},
c: function () {}
}
var f = new Fn;
1.只有浏览器天生给Fn.prototype开辟的堆内存里面才有constructor,而我们自己开辟的这个堆内存每个这个属性,
这样的constructor指向就不在Fn而是Object
console.log(f.constructor)
为了和原来的保持一致,我们需要手动的增加constructor的指向:
function Fn () {
this.x = 200;
}
Fn.prototype = {
constructor:Fn,
a: function () {},
b: function () {},
c: function () {}
}
var f = new Fn;
2.用这种方式给内置类增加公有的属性
给内置类增加Array增加数组去重的方法
Array.prototype.unique = function () {}
Array.prototype = {
constructor: Array,
unique: function () {
}
}
console.dir(Array.prototype)
用这种方法会把之前已经存在原型上的属性和方法给替换掉,所以我们这种方式修改内置类的话,浏览器是给屏蔽掉的
但是我们可以一个个的修改内置的方法,当我们通过下述方式在数组的原型上增加方法,如果方法名和原来的内置重复了,
会把人家内置给修改掉,这时候我们在内置类的原型上增加方法,命名需要加特殊的前缀。