1. 程式人生 > >js難點(二)封裝與繼承

js難點(二)封裝與繼承

js一切皆是物件。然而js語法裡沒有類,所以如果物件裡面要有屬性(proterty)和方法(method),就必須要用到封裝。

為了實現原型物件與例項物件的相關,封裝提供了2種模式,建構函式模式與原型模式。(至於工廠模式就不說啦,工作都沒用到)

(一) 建構函式

    function Cat(name,color){
    this.name=name;
    this.color=color;
  }
  var cat1 = new Cat("大毛","黃色");
  var cat2 = new Cat("二毛","黑色");
  alert(cat1.name); // 大毛
  alert(cat1.color); // 黃色
    alert(cat1.constructor == Cat); //true
  alert(cat2.constructor == Cat); //true
  alert(cat1 instanceof Cat); //true
  alert(cat2 instanceof Cat); //true
(二)原型模式

 function Cat(name,color){
    this.name = name;
    this.color = color;
  }
  Cat.prototype.type = "貓科動物";
  Cat.prototype.eat = function(){alert("吃老鼠")};
   var cat1 = new Cat("大毛","黃色");
  var cat2 = new Cat("二毛","黑色");
  alert(cat1.type); // 貓科動物
  cat1.eat(); // 吃老鼠
 alert(cat1.eat == cat2.eat); //true
一般來講,寫一個例項物件,一般都是通過組合建構函式與原型的,建構函式用於定義例項屬性,原型用於共享屬性與定義方法。
  function Person(name, age, job) {
        this.name = name;
        this.age = age;
        this.job = job;
        this.sayName = function() {
            alert(this.name)
        }
    }
 
    Person.prototype = {
        sayJob : function() {
            console.log(this.job);
        }
    }
 
    var person1 = new Person('tj', 22 , 'fe');
繼承:主要是指子類繼承父類的屬性以及方法

function person(name, sex){

        this.name=name;
        this.sex=sex;
}

     person.prototype.showName=function(){
           alert(this.name);
}
     person.prototype.showSex=function(){
          alert(this.sex);
}
function worker(job){
  personal.apply(this,arguments);
  this.job=job;
}
var ow=new worker('blue','男','程式設計師');
  ow.showName();  //blue
      ow.showsex();  //男
      ow.showjob();  //程式設計師