js面向对象的几种设计模式
1.构造函数模式:返回一个新对象
constructor
通过new来实现
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype.sayName = function(){
return this.name;
}
var student = new Person("YQY",22);
2.工厂模式:返回一个新对象
function createPerson(name){
var person= {
name: name,
sayName:function(){
console.log(this.name);
}
};
return person;
}
//对象调用模式
createPerson("YQY").sayName() // YQY
createPerson("xiaoming").sayName() //xiaoming
//函数调用模式
var t = createPerson("YQY").sayName()
t() //undefined
//原因为createPerson中的sayName方法中的this此时指向window
3.单例模式
var People = (function(){
var instance;
function init(name){
return{
name: name
};
}
return{
createPeople : function(name){
if(!instance){
instance = init(name);
}
return instance
}
}
}());
People.createPeople("YQY") //{"name" :"YQY"}
People.createPeople("xiaoming") //{"name" :"YQY"}
4.混合模式
var Person = function(name,age){
this.name = name;
this.age = age;
}
Person.prototype.sayName = function(){
console.log(this.name);
}
var Student = function(name,age,score){
Person.call(this,name,age);
this.score = score;
};
//Student.prototype = Object.create(Person.prototype)
Student.prototype = create(Person.prototype);
function create(parentObj){
function F(){}
F.prototype = parentObj;
return new F();
};
Student.prototype.sayScore = function(){
console.log(this.score);
}
var student = new Student("YQY",22,95);
5.模块模式:通过闭包来实现一个模块
var Person = (function(){
var name = "YQY";
function sayName(){
console.log(name);
}
return {
name:name,
sayName:sayName
}
})()
Person //{name:name,sayName:sayName}
6.订阅发布模式
var EventCenter = (function(){ var events = {}; function on(evt,handler){ events[evt] = events[evt] || []; events[evt].push({ handler:handler }); } function fire(evt,args){ if(!events[evt]){ return; } for(var i = 0; i < events[evt].length; i++){ events[evt][i].handler(args); } } function off(name){ delete events[name] } return{ on:on, off:off, fire:fire } })();
javascript 面向对象(实现继承的几种方式)
1、原型链继承
核心: 将父类的实例作为子类的原型
缺点: 父类新增原型方法/原型属性,子类都能访问到,父类一变其它的都变了
function Person (name) { this.name = name; }; Person.prototype.getName = function () { //对原型进行扩展 return this.name; }; function Parent (age) { this.age = age; }; Parent.prototype = new Person('老明'); //这一句是关键 //通过构造器函数创建出一个新对象,把老对象的东西都拿过来。 Parent.prototype.getAge = function () { return this.age; }; // Parent.prototype.getName = function () { //可以重写从父类继承来的方法,会优先调用自己的。 // console.log(222); // }; var result = new Parent(22); console.log(result.getName()); //老明 //调用了从Person原型中继承来的方法(继承到了当前对象的原型中) console.log(result.getAge()); //22 //调用了从Parent原型中扩展来的方法
2、构造继承
基本思想
借用构造函数的基本思想就是利用call或者apply把父类中通过this指定的属性和方法复制(借用)到子类创建的实例中。
因为this对象是在运行时基于函数的执行环境绑定的。也就是说,在全局中,this等于window,而当函数被作为某个对象的方法调用时,this等于那个对象。
call、apply 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
所以,这个借用构造函数就是,new对象的时候(new创建的时候,this指向创建的这个实例),创建了一个新的实例对象,
并且执行Parent里面的代码,而Parent里面用call调用了Person,也就是说把this指向改成了指向新的实例,
所以就会把Person里面的this相关属性和方法赋值到新的实例上,而不是赋值到Person上面,
所以所有实例中就拥有了父类定义的这些this的属性和方法。
因为属性是绑定到this上面的,所以调用的时候才赋到相应的实例中,各个实例的值就不会互相影响了。
核心:使用父类的构造函数来增强子类实例,等于是复制父类的实例属性给子类(没用到原型)
缺点: 方法都在构造函数中定义, 只能继承父类的实例属性和方法,不能继承原型属性/方法,无法实现函数复用,每个子类都有父类实例函数的副本,影响性能
function Person (name) { this.name = name; this.friends = ['小李','小红']; this.getName = function () { return this.name; } }; // Person.prototype.geSex = function () { //对原型进行扩展的方法就无法复用了 // console.log("男"); // }; function Parent = (age) { Person.call(this,'老明'); //这一句是核心关键 //这样就会在新parent对象上执行Person构造函数中定义的所有对象初始化代码, // 结果parent的每个实例都会具有自己的friends属性的副本 this.age = age; }; var result = new Parent(23); console.log(result.name); //老明 console.log(result.friends); //["小李", "小红"]
console.log(result.getName()); //老明
console.log(result.age); //23
console.log(result.getSex()); //这个会报错,调用不到父原型上面扩展的方法
3、组合继承
组合继承(所有的实例都能拥有自己的属性,并且可以使用相同的方法,组合继承避免了原型链和借用构造函数的缺陷,结合了两个的优点,是最常用的继承方式)
核心:通过调用父类构造,继承父类的属性并保留传参的优点,然后再通过将父类实例作为子类原型,实现函数复用
缺点:调用了两次父类构造函数,生成了两份实例(子类实例将子类原型上的那份屏蔽了)
function Person (name) { this.name = name; this.friends = ['小李','小红']; }; Person.prototype.getName = function () { return this.name; }; function Parent (age) { Person.call(this,'老明'); //这一步很关键 this.age = age; }; Parent.prototype = new Person('老明'); //这一步也很关键 var result = new Parent(24); console.log(result.name); //老明 result.friends.push("小智"); // console.log(result.friends); //['小李','小红','小智'] console.log(result.getName()); //老明 console.log(result.age); //24 var result1 = new Parent(25); //通过借用构造函数都有自己的属性,通过原型享用公共的方法 console.log(result1.name); //老明 console.log(result1.friends); //['小李','小红']
4、寄生组合继承
核心:通过寄生方式,砍掉父类的实例属性,这样,在调用两次父类的构造的时候,就不会初始化两次实例方法/属性,避免的组合继承的缺点
缺点:堪称完美,但实现较为复杂
function Person(name) { this.name = name; this.friends = ['小李','小红']; } Person.prototype.getName = function () { return this.name; }; function Parent(age) { Person.call(this,"老明"); this.age = age; } (function () { var Super = function () {}; // 创建一个没有实例方法的类 Super.prototype = Person.prototype; Parent.prototype = new Super(); //将实例作为子类的原型 })(); var result = new Parent(23); console.log(result.name); console.log(result.friends); console.log(result.getName()); console.log(result.age);