js難點(二)封裝與繼承
阿新 • • 發佈:2018-11-05
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(); //程式設計師