JavaScript物件導向編程

標籤：data   副本   object   cto   body   const   his   erp   style   

一：建立對象的模式　

　1原廠模式：用函數封裝以特定的介面建立對象的細節。

function Person(name,age){    var obj = new Object();    obj.name = name;    obj.age = age;    obj.sayName = function(){        alert(this.name)}                    return obj;}
let P1=Person("bob",22);
let P2=Person("Anna",21);

　　2 建構函式模式：在調用函數的時候如果不加new則為普通函數，如果加new則可視為對象

function Person(name,age){    this.name=name;    this.age=age;    this.sayName = function(){        alert(this.name)};}let P1=new Person("bob",22);
P1.sayName();let P2=new Person("Anna",21);
P2.sayName();
Person("George",23);//普通調用
window.sayName();//添加到window

let o=new Object;
Person.call(o,"Cristin",24)
o.sayName();

　　2.1寄生建構函式模式：

　　　　

function Person(name,age){    let obj = new Object();    obj.name=name;    obj.age=age;        obj.sayName = function(){alert(this.name);}
　　return obj;}
//用於在特殊情況下來為對象建立建構函式。
function specialArray(){
let arr = new Array();
arr.push.apply(values,arguments);
arr.toPipedString = arr.join("|");
return arr;
}

 

　　3 原型模式：prototype,即在Person中的屬性均為Person.prototype.name = name等代碼，以下直接展示最常用的原型+建構函式模式

function Person(name,age){    this.name=name;    this.age=age;    }Person.prototype.sayName=fucntion(){    alert(this.name);}let P1 = new Person("george",23);P1.sayName()

　　3.1 動態原型模式：

function Person(name,age){    this.name = name;    this.age=age;    if (typeof this.sayName != "function"){        Person.prototype.sayName(){            this.name;}}}

 

二 繼承：

　　1 原型鏈繼承

function SuperType(){this.property=true;}SuperType.prototype.getSuperValue = function(){return this.property;}function SubType(){this.subproperty=false;}subType.prototype = new Supertype();SubType.prototype.getSubValue = function(){return this.subproperty;}let s1 = new SubType();s1.getSuperValue;//trues1.getSubValue;//false



//原型式繼承
function object(o){
function F(){//建立一個臨時性建構函式
F.prototype=o;//傳入參數作為該函數的原型
return new F();//返回該函數的執行個體，實際上該執行個體已經包含了參數的原型，複製了一遍。
}
//ECMA5中引入了Object.create（）的方法
var person ={
name:"Anna",
age:"20",
friend:["Mike","bob"]}
var p1=Object.create(person);
p1.name = "george";
p1.friend.push("Niclaos")
var p2=Object.create(person);
p2.name;//Anna 字串為基本類型值，棧記憶體
p2.friend;//["Mike","bob","NIclaos"]數組時參考型別值，堆記憶體

　　2 借用建構函式繼承

function SuperType(){this.colors=["red","green","blue"];}function SubType(){SuperType.call(this);//相當於建立了一個副本，所以相互不影響}let s1 = new SubType();s1.colors.push("black");//["red","green","blue","black"]let s2 = new SubType();s2.colors;//["red","green","blue"]

　　3 組合繼承：（原型鏈+建構函式）

　　

function SuperType(name){this.name=name;this.color=["red","green","blue"];}SuperType.prototype.sayName=function(){alert(this.name);}function SubType(name,age){SuperType.call(this,name);//繼承SuperType屬性,傳一個name參數this.age=age;}SubType.prototype = new SuperType;//繼承方法SubType.prototype.sayAge=function(){alert(this.age);}let s1 = new SubType( "Anna",23);s1.sayName;//Annas1.sayAge;//23s1.color//["red","green","blue"]

 

　　2 寄生式繼承

function createAnother(original){let clone =Object.create(original);//建立一個寄生的對象//給對象一些增強型方法
clone.sayHi=function(){alert("HI");};
返回這個對象return clone;}var person={name :"Anna",age:"18"}var anotherPerson = createAnother(person);anotherPerson.sayHi();

 

　　3 寄生組合式繼承（最常用）

function SuperType(name,age){    this.name=name;    this.age=age;}SuperType.prototype.sayName=function(){    alert(this.name);    }function SubType(name,age){    SuperType.call(this,name,age);    this.friend=["anna","bob"];    }　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//繼承屬性SubType.prototype = Object.create(SuperType.prototype);//繼承方法SubType.prototype.constructor = SubType;　　　　　　　　　//重新導向構造器SubType.prototype.sayfriend=function(){    alert(this.friend);};　　　　　　　　　　　　　　　　　　//增強方法let s1=new SubType("George",21);s1.constructor;//SubTypes1.sayName;//Georges1.sayAge;//21s1.name;//George

 

JavaScript物件導向編程