js设计模式(二)对象继承

创建对象的安全模式

在调用类对象时,很容易忘记使用new而犯错误,需要使用检测来监控

var Book = function(title,time){
  this.title = title;
  this.time = time;
}
var book = Book("peter","2001"); //undefined this指向的是window window.title=peter
//安全模式
var Book = function(title,time){
  if(this instanceof Book){
     this.title = title;
     this.time = time;
  }else{
     return new Book(title,time);
  }
}
var book = Book("peter2","2002");  // book.title = peter2

继承模式

类式继承

//声明父类
function SuperClass(){ 
  this.superValue = true,
  this.arr = ['js','java']
}
//父类公有方法
SuperClass.prototype.getSuperValue = function(){
   return this.superValue;
}
//声明子类
funciton SubClass(){ this.subClass = false}
//继承父类 注意这里是把父类实例对象给子类原型
SubClass.prototype = new SupClass();
//子类共有方法 
SubClass.prototype.getSubValue = funciton(){return this.subClass}
var subClass = new SubClass()
subClass.getSuperValue() // true
subClass.getSubValue()  //false
缺点1：由于SubClass.prototype = new SupClass();
所有的子类都是继通过原型prototype对父类实例化,继承了父类.父类中的共有属性要是引用类型,
就会被子类中所有的实例共用,因此一个子类的实例更改子类原型从
父类构造函数中继承来的公有属性就会直接影响到其他的子类。
例: var sub1 = new SubClass(); 
    console.log(sub1.arr) //js,java 
    sub1.arr.pusn("ios");
    var sub2 = new SubClass();
    console.log(sub2.arr) //js,java,ios 
缺点2：通过prototype对父类的实例化,在创建父类的,无法向父类传递参数,
    因此在实例化父类的时候也无法对父类构造函数内的属性进行初始化

创建即继承----构造函数继承

//声明父类
function SuperClass(id){
    //引用类型共有属性
    this.books = ['javaScript','html'];
    //值类型共有属性
    this.id = id;
}
//父类声明原型方法
SuperClass.prototype.showBooks = function(){
   this.console(this.books);
}
//声明子类 
function SubClass(id){
  //继承父类 call也被称为改变上下文环境
  SuperClass.call(this,id)
}
SubClass.prototype.sayHi = function(){
    console.log(this.id);
}
var sub1 = new SubClass(10);
var sub2 = new SubClass(20);
console.log(sub1.books) // ['javaScript','html'];
sub1.books.push('css') 
console.log(sub1.books) // ['javaScript','html','css'];
console.log(sub2.books) // ['javaScript','html'];
*** sub2.showBooks() //TypeError  并没有实例化SuperClass 没有继承它prototype的属性
*** sub2.sayHi() //20
//https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call

组合继承---结合二者优点

//声明父类
function SuperClass(id){
    //引用类型共有属性
    this.books = ['javaScript','html'];
    //值类型共有属性
    this.id = id;
}
//父类声明原型方法
SuperClass.prototype.showBooks = function(){
   this.console(this.books);
}
//声明子类 
function SubClass = function(id,time){
  //继承父类 call也被称为改变上下文环境
  SuperClass.call(this,id);
  this.time = time;
}
//继承父类 注意这里是把父类实例对象给子类原型
SubClass.prototype = new SupClass();
//子类原型方法
SubClass.prototype.getTime = function(){
  console.log(this.time)
}