JavaScript 模拟面向对象编程

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运算符来验证对象和实例对象之间的关系。

image.png

构造函数模式的问题

构造函数方法很好用, 但是存在一个浪费内存的问题。
如果我们为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对象, 因此提高了运行效率。


image.png

isPrototypeOf() 判断对象和实例之间的关系

image.png

hasOwnProperty()

每个实例对象有一个hasOwnProperty()方法, 用来判断某一个属性是不是本地属性, 还是继承自prototype对象属性。


image.png

in运算符

in运算符可以用来判断, 某个实例是否含有某个属性, 不管是不是本地属性。


image.png

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.

image.png

注意, 每一个实例都有一个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。因此, 上面的代码是有问题的。


image.png

所以, 第二行代码Dog.prototype.constructor = Dog, 其实也把Animal.prototype.constructor属性的值也改掉了。

image.png

(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, 这等于在子对象上打开一条通道, 可以直接调用父对象 的方法(添加该属性以备后用)。

你可能感兴趣的:(JavaScript 模拟面向对象编程)