JS面向对象设计模式

·  阅读 192

创建对象

工厂模式

function createPerson(name, age, job){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){
        alert(this.name);
    };
    return o;
}
var person1 = createPerson("Nicholas", 29, "Software Engineer");
var person2 = createPerson("Greg", 27, "Doctor");
复制代码

但这种方式有一个缺点:无法判断某个对象是什么类型。

构造函数模式

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function(){
        alert(this.name);
    };
}
var p1 = new Person("Nicholas", 29, "Software Engineer");
var p2 = new Person("Greg", 27, "Doctor");
复制代码

构造函数也存在问题,每个方法都要在实例上创建一遍。也就是说p1和p2的sayName()方法虽然作用相同,但这两个方法并不是同一个函数

解析一道题

new操作符做了什么:

(1)创建一个新对象

(2)将构造函数的作用域赋给新对象(因此this就指向了这个新对象)

(3)执行构造函数中的代码

(4)返回新对象

原型模式

function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
    alert(this.name);
};
var person1 = new Person();
person1.sayName(); //"Nicholas"
复制代码

当我们改变 值为引用类型的对象的属性 时,这个改变的结果会被其他对象共享。

构造函数 + 原型模式

构造函数模式的属性没毛病。缺点是:无法共享方法

原型模式的方法没毛病。缺点是:当原形对象的属性的值为引用类型时,对其进行修改会反映到所有实例中 

那我们就将两者的结合,对象的属性使用构造函数模式创建,方法则使用原型模式创建

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.friends = ["Shelby", "Court"];
}
Person.prototype = {
    constructor : Person,
    sayName : function(){
        alert(this.name);
    }
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
person1.friends.push("Van");
alert(person1.friends); //"Shelby,Count,Van"
alert(person2.friends); //"Shelby,Count"
alert(person1.friends === person2.friends); //false
alert(person1.sayName === person2.sayName); //true
复制代码

继承

原型链

JavaScript中引入了原型链的概念,具体思想: 子构造函数的原型对象初始化为父构造函数的实例,孙构造函数的原型对象初始化为子构造函数的实例…… ,这样子对象就可以通过原型链一级一级向上查找,访问父构造函数中的属性以及方法。

function SuperType(){
     this.property = true;
};
SuperType.prototype.getSuperValue = function(){
    return this.property;
}
function SubType(){
    this.subproperty = false;
};
// 继承Supertype
SubType.prototype = new SuperType();
​
SubType.prototype.getSubValue = function(){
    return this.subproperty;
}
​
var instance = new SubType();
alert(instance.getSuperValue());
复制代码

当我们改变 值为引用类型的原型对象的属性 时,这个改变的结果会被所有子对象共享。这个缺点某些时候相当致命,所以我们很少使用这种方法来继承

借用构造函数

function SuperObject(){
  this.colors = ['red','blue'];
  this.sayBye= function(){
    console.log('Bye')
  }
}
function SubObject(){
  SuperObject.call(this);  // 在子类中调用父类的构造方法,实际上子类和父类已经没有上下级关系了
}
​
​
var instance1 = new SubObject();
instance1.colors.push('yellow');
var instance2 = new SubObject();
console.log(instance2.colors); //['red','blue']
console.log(instance2 instanceof SuperObject); // false
console.log(instance1.sayBye === instance2.sayBye)  // false
复制代码

这个方法虽然弥补了原型链的缺点,但是又暴露出了新的缺点:

 1 子类和父类没有上下级关系,instance2 instanceof SuperObject 结果是false

 2 父类中的方法在每个子类中都会生成一遍,父类中的方法没有被复用。

组合继承

组合继承就是将原型链继承和借用构造方法继承组合,发挥两者之长。

function SuperType(name){
    this.name = name;
    this.colors = ['blue'];
}
SuperType.prototype.sayName = function(){
    alert(this.name);
}
​
function SubType(name, age){
    // 引用父类型的属性,又调用了一次父函数
    SuperType.call(this,name);
    this.age = age;
}
// 继承父类型的方法,调用了一次父函数
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function(){
    alert(this.age);
}
​
var instance1 = new SubType('zz',18);
instance1.sayName(); //zz
instance1.sayAge(); //18
instance1.colors.push('red');
console.log(instance1.colors); // ['blue','red']
​
var instance2 = new SubType('tt',22);
console.log(instance2.colors); // ['blue']
组合继承会调用两次父类型函数

原型式继承
代码块
function object(o){
    function F(){};
    F.prototype = o;
    return new F();
}
​
var Person = {
    name: 'Nicholas'
    friends: ['zz','cc']
}
var anotherPerson = object(Person);
anotherPerson.friends.push('dd');
console.log(anotherPerson.friends); //['zz','cc','dd']
复制代码

寄生式继承

function createAnother(o){
    var clone = object(o);
    o.sayHi = function(){
        console.log('hi');
    }
    return clone;
}
复制代码

寄生组合式继承

虽然组合继承没啥大缺点,但是爱搞事情的有强迫症的程序猿们觉得,组合继承会调用两次父类型函数(在上面的代码中标注了),不够完美。于是道格拉斯就提出了寄生组合继承。

思路是构造一个中间函数,将中间函数的prototype指向父函数的原型对象,将子函数的prototype指向中间函数,并将中间函数的constructor属性指向子函数。

function object(o){
    function F(){};
    F.prototype = o;
    return new F();
}
​
function inheritPrototype(subType,superType){
    var prototype = object(superType.prototype);
    prototype.constructor = subType;
    subType.prototype = prototype;
}
​
function SuperType(name){
    this.name = name;
    this.colors = ['red','blue','green'];
}
SuperType.prototype.sayName = function(){
    alert(this.name);
}
function SubType(name,age){
    SuperType.call(this,name);
    this.age = age;
}
inheritPrototype(SubType,SuperType);
​
SubType.prototype.sayAge = function(){
    alert(this.age)
}
var instance1 = new SubType('zz', 18);
instance1.sayName();
复制代码

ES6的继承

这段代码有两条原型链

参考资料

MDN:developer.mozilla.org/zh-CN/docs/…

JS高级语言程序设计第六章(面向对象的程序设计)

ES6(类):es6.ruanyifeng.com/#docs/class

分类:
前端
标签: