Javascript面向對象編程一直是面試中的重點,將本身的理解整理以下,主要參考《Javascript高級程序設計 第三版》,歡迎批評指正。javascript
var person_1 = { name: "userName", age: 20 }
經過一個構造函數接收參數的方式構造對象,可無數次調用這個函數,經過改變參數構造不一樣的對象
function createPerson(name,age){ var o = new Object();//建立一個空的對象 -- 原料 o.name = name; o.age = age; o.sayName = function(){ //給對象屬性賦值 -- 加工過程 alert(this.name) } return o; //返回加工後的對象 -- 出廠 } var leo = createPerson('Leo',30); leo.sayName(); //"Leo" var cherry = createPerson('Cherry',20); cherry.sayName(); //"Cherry"
缺點:工廠模式建立的對象,沒法判斷其類型
相似Array,Object這種原生的構造函數,咱們能夠經過建立自定義的構造函數,從而定義自定義對象的類型和方法
function Person(name,age){ this.name = name; this.age = age; this.sayName = function(){ alert(this.name); } } var leo = new Person('Leo',18); var cherry = new Person('Cherry',25); leo.sayName(); cherry.sayName();
alert(leo instanceof Person); //true alert(leo instanceof Object); //true 全部對象都繼承自Object
Person('window',100);//直接調用,至關於將Person類的屬性方法直接添加到了this上 window.sayName(); //window
this.sayName = new Function("alert(this.name)")
單首創建出來的alert(leo.sayName==cherry.sayName);//false
function Person(){} //構造函數變成空 Person.prototype.name = 'Leo'; Person.prototype.age =30; Person.prototype.sayName = function(){ alert(this.name); } var person1 = new Person(); var person2 = new Person(); alert(person1.sayName==person2.sayName);//true 將sayName方法定義在Person的prototype屬性中,可由多個不一樣的實例共享 //簡化寫法: function Person() { } //構造函數變成空 Person.prototype = { name: 'Leo', age: 30, sayName: function () { alert(this.name); } } var person1 = new Person(); var person2 = new Person();
alert(Person.prototype.isPrototypeOf(person1));//true alert(Person.prototype.isPrototypeOf(person2));//true alert(Object.getPrototypeOf(person1)==Object.getPrototypeOf(person2));//true
person1.name='Nancy'; alert(person1.name);//Nancy alert(person1.hasOwnProperty("name"));//True 實例對象上的屬性 alert(person2.hasOwnProperty("name"));//false 原型中的屬性 alert("name" in person1);//true alert("name" in person2);//true for(key in person1){ alert(`${key}:${person1[key]}`) }
function Newperson(){ } Newperson.prototype = { constructor : Newperson, name:"Tony", age:30, job:"Developer", friends:['Leo','Cherry'], sayName:function(){ alert(this.name); } } let newPerson1 = new Newperson(); let newPerson2 = new Newperson(); alert(newPerson1.friends);//Leo, Cherry alert(newPerson2.friends);//Leo, Cherry newPerson1.friends.push('Mai');//friends屬性引用數組在Newperson.prototype而非newPerson1中,newPerson1.friends和newPerson2.friends指向的是同一個引用 alert(newPerson1.friends);//Leo, Cherry, Mai alert(newPerson2.friends);//Leo, Cherry, Mai alert(newPerson1.friends === newPerson2.friends);//true
function Person(name,age,job){ this.name = name; this.age = age; this.job = job; this.friends = ["Leo","Cherry"]; } Person.prototype = { constructor:Person, sayName:function(){ alert(`${this.name} is a ${this.job}.`);//公共方法 } } let person1 = new Person('Mai',18,'actor'); let person2 = new Person('Bob',25,'developer'); person1.sayName(); person2.sayName(); alert(person1.friends == person2.friends);//false friends屬性在構造函數中定義,不在原型中,兩個實例不會相互影響 person1.friends.push('Tony'); person2.friends.push('Melody'); alert(person1.friends);//Leo, Cherry, Tony alert(person2.friends);//Leo, Cherry, Melody