M107-es6學(xué)習(xí)資料和js手冊-25面向?qū)ο蟮某绦蛟O(shè)計

1、6面向?qū)ο蟮某绦蛟O(shè)計v!DOCTYPE HTMLjs面向?qū)ο蟮某绦蛟O(shè)l| vscript type二”textavascripL 1使丿(J new object()方式定義/*var person=new Object();=HzhuweiH;person.age=24;person.sex=HboyH;person.sayName=function ()alert(“你的名字是:++”n+”年齡:”+this.age+”性別:“+this.sex);*/2使用字面屋定義/*var per=name:*zhuwei,age: 24,sex:l,sayN

2、ame:function()alert();I*/alert();/ 訪問對象屬性/per.sayName();/ 調(diào)用方法關(guān)于屬性類型和訪問器屬性屬性類型/Configurable表示能否通過delete刪除屬性而重新定義/Enumerable表示能否用for-in來遍歷屬性，默認(rèn)是true/Writable表示能否修改屬性的值，默認(rèn)true/Value包含這個屬性的數(shù)據(jù)值，寫入的時候把新值保存在這個位置，默認(rèn)是 undefined/要改變屬性的默認(rèn)值要使用object.defineProperty()方法設(shè)置/接收的參數(shù)：對象，屬性的名字，描述符 (Con

3、figurable,Enumerable,Writable,value)修改描述符其中的一個可以修改對應(yīng) 的屬性/*var person=);Object.definePropeily(person/name, writable:false, value:HzhuweiM);alert();=Hxiaoxin;/4s 許修改alert();*/一般來說都是默認(rèn)是true可以修改/3訪問器屬性：是一對get,set函數(shù)，一個是設(shè)置，一個獲取值設(shè)置一個屬性的值會導(dǎo)致其他屬性發(fā)生變化，這是一種訪問器屬性常見的 方法/*var book

4、=_year:2004,edtion: 1;/_year 只能通過對象方法訪問Object.defineProperty(book,yearH,get:function()return this._year;,set:function(newVal) if(newVal2004) this._year=newVal; this.edtion+=newVal-2004;)1);book.yeai-2005;alert(book.edtion);*/如果瀏覽器不支持defineProperty的話，不能配置Configurable/3定義多個屬性，使用defineProperties();/*va

5、r book=);Object.defineProperties(book, _year: value:2004,edition:valueJ,year: get:function()return this._year;/只能通過對象的方式來訪問，set:function(val)if(val2004)this._year=val;this.edition+=val-2004;);book.year=2005; alert(book.year); */創(chuàng)建對彖：/I工廠模式，2構(gòu)造函數(shù)模式，3原型模式，4構(gòu)造函數(shù)和原型模式的組合 模式5動態(tài)原型模式，6寄生構(gòu)造函數(shù)模式，7穩(wěn)妥構(gòu)造函數(shù)模式1工廠

6、模式用函數(shù)封裝以特定接口創(chuàng)建對象的細(xì)節(jié)/*function createPerson(name,sexage)var obj=new Object();=name;obj.sex=sex;obj.age=age;obj.sayName=function()alert();返回對象objreturn obj;var p 1 =createPerson(Hzhuwein, 1,23);var p2=createPerson(Hxiaoxi,0,22);alert();*/工廠模式解決了創(chuàng)建多個相似的對象，但是沒解決對象識別問題(對象的 類型)2構(gòu)造函

7、數(shù)模式可以自定義對象類型的屬性和方法不要return，對定構(gòu)造函數(shù)第一個字母大寫/*function Person(name,sex,age)this.nanie=name; this.sex=sex; this.age=age;this. sayName 二 function。 alert();1*/a實例化對象/var perl=new Person(Hzhuwei, 1,24);/var per2=new Person(Hheige0,23);/alert();/per2.sayName();/alert(perl instanceof Object)

8、;/true 是一個對象/alert(perl instanceof Person);/true 是一個對象/b當(dāng)作函數(shù)使用/Person(HdaheiH, 1J 3);/window.sayName();/this 總是指向 Global 全局對象 window/C在另一個對象的作用域中調(diào)用/var o=new Object();/Person.calKo/heigeM ,24);/ 調(diào)用參數(shù)/o.sayName();構(gòu)造函數(shù)的缺點：每個方法都要在每個實例上調(diào)用重新創(chuàng)建一邊 解決方法是將方法定義在外面/*function Person(name,sex,age) =name

9、;this, sex 二 sex;this.age=age;this.sayName=sayName;function sayName() alert();1var per=new Person(nheige* 1,23); per.sayName();*/如果遇到多個方法，那就麻煩了讓對象實例共享它所包含的屬性和方法（不必在構(gòu)造函數(shù)中定義對象實例，而是直接添加到原型對象中）function Person();P=HzhuweiM;Ptotype.age=23;Ptotype.sex=Hboyu;Pe

10、totype.sayName=function()alert();var pi-new Person();var pr2=new Person();p 匚 sayName();=HdddH;p 匚 sayName();*/先到實例中找屬性，如果沒有就在原型中找原型模式無法重寫原型中的值/a判斷屬性是來自實例還是原型中，使用hasOwnPropeityO； /aIert(pr.hasOwnProperty(HnameH);/來自實例返回 true,原型返回 false /b原型操作符in和原型/in只能通過對象訪問到返回true,而hasOwnPr

11、operty()只在實例中返回true /name in obj.has 返回 false(即是對象)7if( !obj.hasOwnPropeily() & name in obj)$ ,c 甘象,否則MK 興 I I 實例/簡單的原型模型語法/*function Per();totype=constructor: Per,name:,zhuwei,age:23,sayName:function()/alert();1*/不能重寫，所有的實例都共享了一個屬性4組合模式(構(gòu)造和原型模式結(jié)合)解決了共享問題，每個實例都有自己的副本。利用構(gòu)造函數(shù)定義對象的屬性，利用

12、原型模型定義成員 方法/*function Perobj(name,age,sex)=name;this.age=age;this, sex 二 sex;)Perobj .prototype= constructor: Peiobj 9sayName:function()alert();)實例化對象var pobj=new Perobj(Hheige*23 J);var pobj2=new Perobj(Hmaoge,24,1);alert();調(diào)用方法pobj.sayName();組合模式最為常見的設(shè)汁模式*/5動態(tài)原型模式把信息封裝在構(gòu)

13、造函數(shù)中，而通過構(gòu)造函數(shù)中初始化，乂保持了構(gòu)造函數(shù) 和原型的優(yōu)點動態(tài)原型模式，可以instanceof確定屬性的類型不能使用對象字面量重寫原型/*function Stu(name,age,sex)定義屬性=name;this.age=age;this.sex=sex;方法，先判斷是否存在方法if(typeof this.sayName != function1)Stotype.sayName=function() alert();)*/6寄生構(gòu)造函數(shù)模式僅僅是封裝創(chuàng)建對象的代碼，返回新建對象(典型的構(gòu)造函數(shù)模式) /*function Stu(

14、nanie,sex)var o=new Object();=name;o.sex=sex;o.sayName=function() alert();return o;)實例化var stu=new Stu(Hzhuwei,l);stu.sayName();*/繼承(原型鏈，借用構(gòu)造函數(shù)在子類型構(gòu)造函數(shù)中調(diào)用超級類重構(gòu)) /*function Super()this.colors=,red,blueHgreenH:a借用構(gòu)造函數(shù)在子類型構(gòu)造函數(shù)中調(diào)用超級類重構(gòu)，子類繼承function subTy() Super.call(this);var a 1 =new Su

15、per();var a2=new subTy();al .colors.push(HblackH);alert(al.colors);使用借用構(gòu)造函數(shù)實現(xiàn)子類繼承父類，不能避免構(gòu)造函數(shù)模式存在 */b組合繼承，將原型鏈和借用構(gòu)造函數(shù)結(jié)合使用原型鏈對原型屬性和方法繼承，借用構(gòu)造函數(shù)模式實現(xiàn)對實例的屬性 繼承function Super(name)=name; this.colors=red,bluengreenn;)原型鏈Stotype.sayName=function()alert();子類function Sub(name,age)使用call調(diào)用父類Super.call(this,name);/第一個是對象,第二個是參數(shù)this, age二age;子類繼承父類方法和屬性Stotype