js中的oop編程

2019-11-08 03:28:10

字體：大中小

供稿：網(wǎng)友

在js中，一切皆對象

工廠模型

function createPerson(name , sex , age){ var obj = new Object(); obj.name = name ; obj.sex = sex ; obj.age = age ; obj.sayName = function(){ alert(this.name); } return obj;}var p1 = createPerson('z3' , '男' , 20);var p2 = createPerson('z4' , '女' , 25);alert(p1.sex);p1.sayName();

構(gòu)造函數(shù)式

// 函數(shù)的第一個(gè)字母大寫 (類的模版)function Person(name , age , sex){ this.name = name ; this.age = age ; this.sex = sex ; this.sayName = function(){ alert(this.name); }}var p1 = new Person('小1' , 20 , '男');// 在另一個(gè)對象的作用域中調(diào)用var o = new Object();Person.call(o,'小4' , 12 , '女');alert(o.name);

原型

原型對象里的所有屬性和方法被所有構(gòu)造函數(shù)實(shí)例化出來的對象所共享每次代碼讀取一個(gè)對象的屬性的時(shí)候: 首先會(huì)進(jìn)行一次搜索:搜索實(shí)例對象里的屬性,，如果沒有,再去對應(yīng)的原型對象里去搜索屬性如果有就返回沒有返回undefined

isPRototypeOf(new instance) //判斷原型的方法ECMA5: Object.getPrototypeOf() //根據(jù)實(shí)例對象獲得原型對象hasOwnProperty('name') //判斷是否是實(shí)例屬性function Person(){ }Person.prototype.name = 'z3'; Person.prototype.age = 20 ; Person.prototype.sayName = function(){alert('我是原型對象的方法!')}; var p1 = new Person();alert(p1.name); // z3 var prototypeObj = Object.getPrototypeOf(p1);//根據(jù)實(shí)例對象獲得原型對象alert(prototypeObj == Person.prototype);// in 操作符判斷屬性是否存在于實(shí)例對象和原型對象中// 在原型對象中是否存在這個(gè)屬性第一個(gè)參數(shù):當(dāng)前對象，第二個(gè)參數(shù):要判斷的屬性function hasprototypeProperty(object , name){ return !object.hasOwnProperty(name) && name in object ;}// ECMA5新特性 Object.keys(): 拿到當(dāng)前對象里的所有keys 返回一個(gè)數(shù)組var p1 = new Person();p1.name = 'z3';p1.age = 20 ; var attributes = Object.keys(p1);alert(attributes);var attributes2 = Object.keys(Person.prototype);alert(attributes2);// ECMA5 constructor屬性：該屬性是不能被枚舉的[eable = false]// Object.getOwnPropertyNames 枚舉對象所有的屬性：不管該內(nèi)部屬性能否被枚舉var attributes3 = Object.getOwnPropertyNames(Person.prototype);alert(attributes3);

簡單原型

組合使用原型和構(gòu)造函數(shù)式

開發(fā)時(shí)常用的方式

//屬性都放到類里function Person(name , age , friends , job){ this.name = name ; this.age = age ; this.friends = friends ; this.job = job ;}//方法都放到原型Person.prototype = { constructor: Person , sayName : function(){ alert(this.name); }};

動(dòng)態(tài)原型模式

穩(wěn)妥構(gòu)造函數(shù)式

沒有公共屬性不能使用this對象function Person(name , age , job){ // 創(chuàng)建一個(gè)要返回的對象 var obj = new Object(); var name = name ; obj.sayName = function(){ alert(name); } return obj ; }

原型繼承

特點(diǎn)：即繼承了父類的模版，又繼承父類的原型對象缺點(diǎn)：……

// 父類function Person(name, age){ this.name = name ; this.age = age ;}Person.prototype.id = 10 ;// 子類function Boy(sex){ this.sex = sex ; }//繼承Boy.prototype = new Person('z3');var b = new Boy();alert(b.name);alert(b.id);

構(gòu)造函數(shù)繼承（類繼承）

只繼承模版，不繼承原型對象

// 父類function Person(name, age){ this.name = name ; this.age = age ;}Person.prototype.id = 10 ;// 子類function Boy(name , age , sex){ Person.call(this,name,age); this.sex = sex;}var b = new Boy('張三' , 20 , '男');alert(b.name);alert(b.sex);alert(b.id); //父類的原型對象并沒有繼承

混合繼承

原型繼承+借用構(gòu)造函數(shù)繼承

缺點(diǎn)：繼承了父類的2次模版

// 父類function Person(name, age){ this.name = name ; this.age = age ;}Person.prototype.id = 10 ;Person.prototype.sayName = function(){alert(this.name);};// 子類function Boy(name , age , sex){ Person.call(this,name,age); // 借用構(gòu)造函數(shù)繼承父類的模版 this.sex = sex ; } // 原型繼承Boy.prototype = new Person(); //繼承父類的模版和原型對象var b = new Boy('李四' , 20 , '男');alert(b.name);alert(b.sex);b.sayName();

混合繼承改進(jìn)

//繼承1次父類的模版繼承一次父類的原型對象function extend(sub ,sup){ // 目的：實(shí)現(xiàn)只繼承父類的原型對象 var F = new Function(); // 創(chuàng)建一個(gè)空函數(shù) 目的：空函數(shù)進(jìn)行中轉(zhuǎn) F.prototype = sup.prototype; // 實(shí)現(xiàn)空函數(shù)的原型對象和超類的原型對象轉(zhuǎn)換 sub.prototype = new F(); // 原型繼承 sub.prototype.constructor = sub ; // 還原子類的構(gòu)造器 //保存父類的原型對象: 一方面方便解耦另一方面方便獲得父類的原型對象 sub.superClass = sup.prototype; //自定義一個(gè)子類的靜態(tài)屬性接受父類的原型對象 //判斷父類的原型對象的構(gòu)造器(加保險(xiǎn)) if(sup.prototype.constructor == Object.prototype.constructor){ sup.prototype.constructor = sup ; }}//父類function Person( name , age){ this.name = name ; this.age = age ; }Person.prototype = { constructor: Person , sayHello: function(){ alert('hello world!'); }};//子類function Boy(name , age , sex){ //借用構(gòu)造函數(shù)繼承只復(fù)制了父類的模版 Boy.superClass.constructor.call(this , name , age); this.sex = sex ;}extend(Boy , Person);// 給子類加了一個(gè) 原型對象的方法Boy.prototype.sayHello = function(){ alert('hi javascr