JavaScript是一种基于对象的语言, 所有的东西几乎都是对象。 但它又不是一种真正的面向对象编程语言, 因为它的语法中没有class类。
如果我们想在JavaScript中模拟面向对象编程, 要怎么做?
1. “封装”数据和方法
(1. 构造函数模式
所谓构造函数, 其实就是一个普通的函数, 但是内部使用了this
变量。 对构造函数使用new
关键字, 就能生成实例, 并且this变量会绑定到实例对象上。
function Dog(name, color){
this.name = name;
this.color = color;
}
// 实例对象
var dog1 = new Dog('dog11', 'red');
var dog2 = new Dog('dog22', 'blue');
console.log(
dog1.name,
dog1.color,
dog2.name,
dog.color
);
此时 dog1和dog2会自动有一个constructor属性, 指向它们的构造函数
dog1.constructor === Dog
dog2.constructor === Dog
JavaScript提供了一个instanceof
运算符来验证对象和实例对象之间的关系。
构造函数模式的问题
构造函数方法很好用, 但是存在一个浪费内存的问题。
如果我们为Dog对象添加一些不变的属性并再添加一些方法, 那么原型对象Dog可能会变成下面这样:
functiont Dog(name,color){
this.name = name;
this.color = color;
this.type = "动物";
this.eat = function(){alert("吃屎!")};
}
若还是像之前的一样去生成实例, 有一个很大的问题。 那就是每个实例对象, type属性和eat方法都是一样的内容, 每一次生成一个实例, 都必须为重复, 多占用一些内存,这肯定是有问题的。
那么, 有没有可能让type属性和eat()方法成为公共的属性和方法, 只在内存中生成一次呢?然后所有的实例地址都指向那个内存地址去引用?这里就需要使用到prototype模式(即原型&原型链)。
(2. Prototype模式
JavaScript中规定, 每一个构造函数都有一个prototype属性, 指向另一个对象。 这个对象的所有属性和方法, 都会被构造函数的实例继承。
因此, 上面的代码就可以改造成如下:
function Dog(name,color){
this.name = name;
this.color = color;
}
Dog.prototype.type = "动物";
Dog.prototype.eat = function(){alert("吃屎!")};
然后生成实例时, 所有的实例type属性和eat()方法, 其实都是同一个内存地址, 指向prototype对象, 因此提高了运行效率。
isPrototypeOf() 判断对象和实例之间的关系
hasOwnProperty()
每个实例对象有一个hasOwnProperty()方法, 用来判断某一个属性是不是本地属性, 还是继承自prototype对象属性。
in运算符
in运算符可以用来判断, 某个实例是否含有某个属性, 不管是不是本地属性。
2. 继承
现在有两个构造函数, 如何实现Dog继承自Animal呢?
function Animal(){
this.type = "动物";
}
Animal.prototype.eat = function(){
console.log('eat!!!');
}
function Dog(name, color){
this.name = name;
this.color = color;
}
(1. prototype模式
如果Dog的prototype对象, 指向一个Animal实例, 那么所有Dog的实例, 就能继承Animal了。
Dog.prototype = new Animal();
Dog.prototype.constructor = Dog;
var dog1 = new Dog('dog1', 'yellow');
console.log(dog1.type, dog1.eat());
代码的第一行, 将Dog的prototype对象指向了Animal的实例。
它相当于完全删除了prototype对象原先的值, 然后赋予了一个新值。
第二行Dog.prototype.constructor = Dog;
是什么意思呢?
这里其他是将Dog的构造函数指向了Dog.
注意, 每一个实例都有一个constructor属性, 默认调用prototype对象的constructor属性。
因此, 在执行Dog.prototype = new Animal();
时, Dog.prototype的constructor是指向Animal的。这显然导致了继承链的错乱, 因此在第二行进行了纠正。这是很重要的一点, 因此在JavaScript模拟面向对象编程时要注意。
(2. 直接继承prototype
改进下上面的代码如下:
Dog.prototype = Animal.prototype;
Dog.prototype.constructor = Dog;
var dog1 = new Dog('dog1', 'yellow');
console.log(dog1.type, dog1.eat());
与前面相比, 这段代码效率更高点(不用执行和建立Animal实例)。 但缺点是Dog.prototype和Animal.prototype现在都指向了同一个对象, 那么对Dog.prototype的修改, 都会被反映到Animal.prototype。因此, 上面的代码是有问题的。
所以, 第二行代码Dog.prototype.constructor = Dog
, 其实也把Animal.prototype.constructor属性的值也改掉了。
(3. 利用空对象作为中介
由于”直接继承prototype"存在上述缺点, 因此我们继承改造, 利用一个空对象作为中介。
var F = function(){};
F.prototyoe = Animal.prototype;
Dog.prototype = new F();
Dog.prototype.constructor = Dog;
因为F是空对象, 所以几乎不占用内存, 这时修改Dog的prototype对象, 就不会影响到Animal.prototype。
于是, 我们将上面的方法封装成一个函数, 便于以后使用:
function extend(child, parent) {
var F = function(){};
F.prototype = Parent.prototype;
Child.prototype = new F();
Child.prototype.constructor = Child;
Child.uber = Parent.prototype;
}
使用方法如下:
extend(Dog, Animal);
var dog1 = new Dog('dog1', 'yellow');
console.log(dog1.type);
另外, 说明 一下, 函数最后一行: Child.uber = Parent.prototype;
意思是为子对象设置一个uber属性, 这个属性直接指向父对象的prototype, 这等于在子对象上打开一条通道, 可以直接调用父对象 的方法(添加该属性以备后用)。