1. 程式人生 > >JS面向物件

JS面向物件

特性:封裝、繼承、多型

封裝:將資料和對資料的操作集中在一起

繼承:一個型別的物件可以訪問另一個型別物件的屬性和方法

多型:同一個方法作用於不同物件會有不同的結果原型物件:每一個建構函式都有一個原型物件,每一個原型物件都有一個指向建構函式的指標(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