JS面向物件
阿新 • • 發佈:2018-12-09
特性:封裝、繼承、多型
封裝:將資料和對資料的操作集中在一起
繼承:一個型別的物件可以訪問另一個型別物件的屬性和方法
多型:同一個方法作用於不同物件會有不同的結果原型物件:每一個建構函式都有一個原型物件,每一個原型物件都有一個指向建構函式的指標(prototype);每一個物件例項都有指向原型物件的內部指標(__proto__),原型物件上的屬性和方法都能被例項所訪問。
封裝:
function Person(name,age){ var count = 10; //私有屬性 this.name = name; //例項屬性 this.age = age; ths.foo = function(){ //例項方法 console.log(count); //10 } } Person.prototype.sayHello = function(){ //原型方法 console.log(this.name); //name值 console.log(count); //報錯,無法獲取建構函式的私有屬性 }
繼承:
原型鏈:
①組合繼承
function Person(){ this.name = name; this.age = age; } Person.prototype.sayHello = function(){ console.log(this.name); } function Male(name,age){ Person.call(this,name,age); //繼承例項屬性 this.sex = “male”; } for(var I in Person.prototype){ //繼承原型方法 Male.prototype[i] = Person.prototype[i]; } Male.prototype.sayHi = function(){ console.log(“aaa”); } var male = new Male(“john”,20); var person = new Person(“jj”,20); male.sayHello(); //john male.sayHi(); //aaa person.sayHi(); //報錯 person.sayHi is not a function
②寄生式組合繼承
function Person(name,age){ this.name = name; this.age = age; } Person.prototype.sayHello = function(){ console.log(this.name); } function Male(name,age){ Person.call(this,name,age); //繼承例項屬性 this.sex = “male”; } Male.prototype = Object.create(Person.prototype); //繼承例項方法 Male.protptype.constructor = Male; //使例項方法指向Male Male.prototype.sayHi = function(){ console.log(“aaa”); } var male = new Male(“john”,20); male.sayHello(); //john console.log(male.__proto__.constructor); //Male建構函式
③ES6中的繼承
class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
sayHello(){
console.log(this.name);
}
static foo(){
console.log(“foo”);
}
}
class Male extends Person{
constructor(name,age){
super(name,age); //super實現例項屬性的繼承,super指向父類的建構函式
}
sayHi(){
super.sayHello(); //super指向父類的原型物件
}
static foo(){
super.foo(); //指向父類
}
}
Var male = new Male(“john”,20);
male.sayHello(); //john
male.sayHi(); //john
Male.foo(); //foo
多型:
console.log(1+2); //3
console.log("1"+"2"); //12