面向对象编程

封装

对象生成的原始模式

var Cat = {
    name  : '',
    color : ''
}

然后生成实例对象,

var cat1 = {};

cat1.name = '大毛';
cat1.color = '黄色';

var cat2 = {};

cat2.name = '二毛';
cat2.color = '黑色';

很简单,但问题是,这样生成的“实例对象”其实和原型对象之间基本没有任何联系。而且生成多个实例的时候,没有简洁的方法,会非常麻烦。

原始模式的改进

function Cat(name,color){
    return {
        name  : name,
        color : color
    }
}

然后生成实例对象,但其实就等于在调用函数,返回一个对象。

var cat1 = Cat('大毛','黄色');
var cat2 = Cat('二毛','黑色');

这种问题是,如果 Cat 中不进行额外的处理,这里仍旧不能反映出来 cat1 和 cat2 内在的联系。

构造函数模式

function Cat(name,color){
    this.name = name;
    this.color = color;
}

现在就可以生成实例对象了。

var cat1 = new Cat('大毛','黄色');
var cat2 = new Cat('二毛','黑色');

这时 cat1 和 cat2 会自动含有一个 constructor 属性,指向他们的构造函数。

console.log(cat1 instanceof Cat); //true
console.log(cat2 instanceof Cat); //true

但此时这种方式仍旧存在其固有的问题。假设这里有一个方法。

function Cat(name,color){
    this.name = name;
    this.color = color;
    this.type = '猫科动物';
    this.eat = function(){console.log('吃老鼠');}
}

生成实例

var cat = Cat('大毛','黄色');
console.log(cat.type); // 猫科动物
cat.eat(); // 吃老鼠。

表面上没什么问题,用的时候也很好用,但是假如我们需要生成大量的 Cat 的实例,那么每个实例都会有 type 属性和 eat 方法,而且这两个都是一摸一样的内容,导致了内存的浪费,因为此时两个实例的相同属性和方法,并不是同样的内存地址。会存在多份。

那么,能不能将所有的相同的属性和方法只存在一份,然后每个实例同样的也可以使用呢?答案肯定是可以的。

prototype 模式

function Cat(name,color){
    this.name = name;
    this.color = color;
}

Cat.prototype.type = '猫科动物';
cat.prototype.eat = function(){console.log('吃老鼠');}

这时候,

var cat1 = new Cat('大毛','黄色');
var cat2 = new Cat('二毛','黑色');

此时,再多的实例对象,其 type 属性和 eat 方法都指向的是同一份,也即相同的内存地址。

console.log(cat1.eat === cat2.eat); //true

prototype 模式的验证方法

为了配合 prototype 模式, javascript 定义了一些辅助方法,帮助我们更方便的使用它。

isPrototypeOf()

这个方法用来判断,某个 prototype 对象和某个实例之间的关系。

console.log(Cat.prototype.isPrototypeOf(cat1)); //true

hasOwnProperty()
次方法用来判断某个属性到底是prototype 对象的属性还是类定义的(本地属性)。

console.log(cat1.hasOwnProperty('name')); true
console.log(cat1.hasOwnProperty('type')); false

in 运算符

此运算符用来判断某个属性是不是存在于某个实例中,即某个实例是否包含某个属性,不管是本地还是继承自 prototype

console.log("name" in cat1); // true
console.log('type' in cat1); // true
console.log('typo' in cat1); // false

in 运算符还可以用来遍历对象的属性。

for(var key in cat1){
    console.log('cat1[' + key ' ]=' + cat1[key]);
}

当然在遍历的时候可以使用 hasOwnProperty() 来限制输出的属性。

没有评论

  • :arrow:
  • :grin:
  • :???:
  • :cool:
  • :cry:
  • :shock:
  • :evil:
  • :!:
  • :idea:
  • :lol:
  • :mad:
  • :mrgreen:
  • :neutral:
  • :?:
  • :razz:
  • :oops:
  • :roll:
  • :sad:
  • :smile:
  • :eek:
  • :twisted:
  • :wink: