WEB前端程序开发Web前端之路

关于原型链模式中的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)
用这种方法会把之前已经存在原型上的属性和方法给替换掉,所以我们这种方式修改内置类的话,浏览器是给屏蔽掉的
但是我们可以一个个的修改内置的方法,当我们通过下述方式在数组的原型上增加方法,如果方法名和原来的内置重复了,
会把人家内置给修改掉,这时候我们在内置类的原型上增加方法,命名需要加特殊的前缀。
上一篇下一篇

猜你喜欢

热点阅读