理解Javascript的動(dòng)態(tài)語言特性
Javascript是一種解釋性語言,而并非編譯性,它不能編譯成二進(jìn)制文件。
理解動(dòng)態(tài)執(zhí)行與閉包的概念
動(dòng)態(tài)執(zhí)行:javascript提供eval()函數(shù),用于動(dòng)態(tài)解釋一段文本,并在當(dāng)前上下文環(huán)境中執(zhí)行。
首先我們需要理解的是eval()方法它有全局閉包和當(dāng)前函數(shù)的閉包,比如如下代碼,大家認(rèn)為會(huì)輸出什么呢?
var i = 100; function myFunc() { var i = 'test'; eval('i = "hello."'); } myFunc(); alert(i); // 100
首先我們來看看先定義一個(gè)變量i=100,然后調(diào)用myFunc這個(gè)函數(shù),然后修改局部變量i,使他從值 'test'變成'hello', 但是我們知道eval的含義是立即執(zhí)行一段文本的含義;因此上面的代碼我們可以寫成如下代碼:
var i = 100; function myFunc() { var i = 'test'; (function(){ return (i = "hello."); })(); } myFunc(); alert(i); // 100
這樣就很明顯了,執(zhí)行myFunc()這個(gè)方法后,i的值從test變?yōu)閔ello的值,但是由于是閉包,i的值為hello,它不能被外部使用,所以瀏覽器打印的都是100值;
我們都知道eval()是javascript的全局對象Global提供的方法,而如果要訪問Global對象的方法,可以通過宿主對象-在瀏覽器中是window來提供;按道理來說,下面的代碼應(yīng)該也是輸出100;如下:
var i = 100; function myFunc() { var i = 'test'; window.eval('i="hello."'); } myFunc(); alert(i);
然后不幸的是:在IE下不管是window.eval()還是eval()方法輸出的都是100;但是在標(biāo)準(zhǔn)瀏覽器下使用window.eval(),輸出的是hello,使用eval()方法的輸出的是100; 因?yàn)镮E下使用的是JScript引擎的,而標(biāo)準(zhǔn)瀏覽器下是SpiderMonkey Javascript引擎的,正是因?yàn)椴煌膉avascript引擎對eval()所使用的閉包環(huán)境的理解并不相同。
理解eval使用全局閉包的場合
如下代碼:
var i = 100; function myFunc() { var i = 'test'; window.eval('i="hello."'); } myFunc(); alert(i);
在標(biāo)準(zhǔn)瀏覽器下,打印的是hello,但是在IE下打印的是100;如果使用如下代碼:
var i = 100; function myFunc() { var i = 'test'; //window.eval('i="hello."'); eval.call(window,'i="hello"'); } myFunc(); alert(i);
也是一樣的,也是給eval方法提供一種訪問全局閉包的能力;但是在IE下Jscript的eval()沒有這種能力,IE下一只打印的是100;不過在IE下可以使用另一種方法得到一個(gè)完美的結(jié)果,window.execScript()方法中執(zhí)行的代碼總是會(huì)在全局閉包中執(zhí)行,如下代碼:
var i = 100; function myFunc() { var i = 'test'; window.execScript('i="hello."'); //eval.call(window,'i="hello"'); } myFunc(); alert(i); // 打印hello
JScript()引擎使用execScript()來將eval在全局閉包與函數(shù)閉包的不同表現(xiàn)分離出來,而Mozilla的javascript引擎則使用eval()函數(shù)的不同調(diào)用形式來區(qū)分它們。二者實(shí)現(xiàn)方法有不同,但是可以使用不同的方式實(shí)現(xiàn)全局閉包;
理解eval()使用當(dāng)前函數(shù)的閉包
一般情況下,eval()總是使用當(dāng)前函數(shù)的閉包,如下代碼:
var i = 100; function myFunc() { var i = 'test'; eval('i="hello."'); } myFunc(); alert(i); // 100
如上代碼:因?yàn)閑val作用與是函數(shù)內(nèi)的代碼,所以輸出的是全局變量i等于100;
eval()總是被執(zhí)行的代碼文本視為一個(gè)代碼塊,代碼塊中包含的是語句,復(fù)合語句或語句組。
我們可以使用如下代碼取得字符串,數(shù)字和布爾值;
eval('true'); // true
eval('"this is a char"'); // string
eval('3'); // 數(shù)字3
但是我們不能使用同樣的方法取得一個(gè)對象;如下代碼:
eval('{name:"MyName",value:1}');
如上代碼會(huì)報(bào)錯(cuò);如下:Uncaught SyntaxError: Unexpected
其實(shí)如上那樣寫代碼,{name:"MyName",value:1},eval會(huì)將一對大括號(hào)視為一個(gè)復(fù)合語句來標(biāo)識(shí),如下分析:
第一個(gè)冒號(hào)成了 “標(biāo)簽聲明”標(biāo)示符。
{“標(biāo)簽聲明”的左操作數(shù)}name成了標(biāo)簽。
MyName成了字符串直接量;
Value成了變量標(biāo)示符。
對第二個(gè)冒號(hào)不能合理地作語法分析,出現(xiàn)語法分析期異常;
如果我們只有這樣一個(gè)就不會(huì)報(bào)錯(cuò)了,如下代碼:
eval('{name:"MyName"}')
輸出"MyName";
那如果我們想要解決上面的問題要如何解決呢?我們可以加一個(gè)小括號(hào)包圍起來,使其成為一個(gè)表達(dá)式語句,如下代碼:
eval('({name:"MyName",value:1})')
輸出一個(gè)對象Object {name: "MyName", value: 1}
但是如下的匿名函數(shù)加小括號(hào)括起來在IE下的就不行了,如下代碼:
var func = eval('(function(){})');
alert(typeof func); // IE下是undefined
在標(biāo)準(zhǔn)瀏覽器chrome和firefox是打印function,但是在IE下的JScript引擎下打印的是undefined,在這種情況下,我們可以通過具名函數(shù)來實(shí)現(xiàn);如下:
eval('function func(){}');
alert(typeof func); // 打印是function
我們使用eval時(shí)候,最常見的是ajax請求服務(wù)器端返回一個(gè)字符串的格式的數(shù)據(jù),我們需要把字符串的格式的數(shù)據(jù)轉(zhuǎn)換為json格式;如下代碼:
// 比如服務(wù)器返回的數(shù)據(jù)是如下字符串,想轉(zhuǎn)換成json對象如下:
var data = '{"name":"Mike","sex":"女","age":"29"}';
console.log(eval("("+data+")"));
打印Object {name: "Mike", sex: "女", age: "29"} 就變成了一個(gè)對象;
// 或者直接如下 ,都可以
console.log(eval("("+'{"name":"Mike","sex":"女","age":"29"}'+")"));
我們還需要明白的是使用eval或者with語句,他們都會(huì)改變作用域的問題,比如使用eval如下代碼:
var i = 100; function myFunc(name) { console.log('value is:'+i); // 100 eval(name); console.log('value is:'+i); // 10 } myFunc('var i = 10;');
如上代碼,第一次執(zhí)行的是100,第二次調(diào)用eval()方法,使作用域變成函數(shù)內(nèi)部了,因此i變成10了;
理解動(dòng)態(tài)方法調(diào)用(call與apply)
Javascript有三種執(zhí)行體,一種是eval()函數(shù)入口參數(shù)中指定的字符串,該字符串總是被作為當(dāng)前函數(shù)上下文中的語句來執(zhí)行,第二種是new Function(){}中傳入的字符串,該字符串總是被作為一個(gè)全局的,匿名函數(shù)閉包中的語句行被執(zhí)行;第三種情況執(zhí)行體就是一個(gè)函數(shù),可以通過函數(shù)調(diào)用運(yùn)算符”()”來執(zhí)行;除了以上三種之外,我們現(xiàn)在還可以使用call()方法或者apply()方法作為動(dòng)態(tài)方法來執(zhí)行;如下代碼:
function foo(name){ alert("hi:"+name); } foo.call(null,'longen'); // 調(diào)用打印 hi: longen foo.apply(null,['tugenhua']); // 調(diào)用打印 hi:tugenhua
call()方法與apply()方法 使用效果是一樣的,都是調(diào)用函數(shù),只是第二個(gè)參數(shù)不一樣,apply第二個(gè)參數(shù)是一個(gè)數(shù)組或者arguments;
在call和apply中理解this的引用
如果我們將一個(gè)普通的函數(shù)將作為一個(gè)對象的方法調(diào)用的話,比如我現(xiàn)在有一個(gè)普通的函數(shù)如下代碼:
function foo(){ alert(this.name); }
現(xiàn)在我們下面定義2個(gè)對象如下:
var obj1 = {name:'obj1'};
var obj2 = new Object();
obj2.name = 'obj2';
那么現(xiàn)在我們使用這2個(gè)對象來分別調(diào)用哪個(gè)上面的普通函數(shù)foo;如下:
foo.call(obj1);
foo.call(obj2);
可以看到,第一次打印的是obj1,第二次打印的是obj2;也就是說第一次的this指針指向與obj這個(gè)對象,第二次this指針指向與obj2這個(gè)對象;
下面是代碼:
function foo(){ alert(this.name); } var obj1 = {name:'obj1'}; var obj2 = new Object(); obj2.name = 'obj2'; foo.call(obj1); // obj1 foo.call(obj2); //obj2
我們在方法調(diào)用中能查詢this引用以得到當(dāng)前的實(shí)例,因此我們也能夠使用的下面的代碼來傳送this的引用;
比如如下代碼:
function foo(){ alert(this.name); } function MyObject(){ this.name = 'myObject'; } MyObject.prototype.doAction = function(){ foo.call(this); } // 測試 var obj3 = new MyObject(); obj3.doAction();
如上代碼先實(shí)例化MyObject這個(gè)對象,得到實(shí)例obj3, 然后調(diào)用實(shí)例的doAction這個(gè)方法,那么當(dāng)前的this指針就指向了obj3這個(gè)實(shí)例,同時(shí)obj3.name = ‘MyObject'; 所以在調(diào)用foo.call(this)時(shí),this指針指向與obj3這個(gè)實(shí)例,因此alert(this.name);就彈出myObject;
使用同樣的方法,我們可以傳遞參數(shù),代碼如下:
function calc_area(w,h) { alert(w*h); } function Area() { this.name = 'MyObject'; } Area.prototype.doCalc = function(v1,v2){ calc_area.call(this,v1,v2); }; var area = new Area(); area.doCalc(10,20);
如上使用了call方法,并且給call方法傳遞了2個(gè)參數(shù),但是上面的我們也可以使用apply()方法來調(diào)用,我們知道apply()方法和call()方法的不同點(diǎn)就是第二個(gè)參數(shù),如上call方法的參數(shù)是一個(gè)一個(gè)的傳遞,但是apply的第二參數(shù)是一個(gè)數(shù)組或者是arguments,但是他們實(shí)現(xiàn)的功能是相同的;
function calc_area(w,h) { alert(w*h); } function Area() { this.name = 'MyObject'; } Area.prototype.doCalc = function(v1,v2){ //calc_area.call(this,v1,v2); calc_area.apply(this,[v1,v2]) }; var area = new Area(); area.doCalc(10,20);
理解javascript對象
Object.defineProperty方法, 該方法是ECMAScript5提供的方法,該方法接收3個(gè)參數(shù),屬性所在的對象,需要修改對象中屬性名字,和一個(gè)描述符對象;描述符對象的屬性必須是 configurable、enumerable、writable 和value。設(shè)置其中的一或多個(gè)值,可以修改對應(yīng)的特性值。
ECMAScript中有2種屬性,數(shù)據(jù)屬性和訪問器屬性
1. 數(shù)據(jù)屬性;
數(shù)據(jù)屬性包含一個(gè)數(shù)據(jù)值的位置。在這個(gè)位置可以讀取和寫入值。數(shù)據(jù)屬性有4個(gè)描述其行為的特性;
configurable:表示能否通過delete刪除屬性從而重新定義屬性,能否修改屬性的特性,或者能否把屬性修改為訪問器屬性。這個(gè)特性值默認(rèn)為true。
enumerable:表示能否通過 for-in 循環(huán)返回屬性。這個(gè)特性值默認(rèn)為true。
writable:表示能否修改屬性的值。這個(gè)特性值默認(rèn)為true。
value: 包含這個(gè)屬性的數(shù)據(jù)值。讀取屬性值的時(shí)候,從這個(gè)位置讀;寫入屬性值的時(shí)候,把新值保存在這個(gè)位置上,這個(gè)特性值默認(rèn)為undefined;
目前標(biāo)準(zhǔn)的瀏覽器支持這個(gè)方法,IE8-不支持此方法;
比如我們先定義一個(gè)對象person,如下:
var person = { name: 'longen' };
我們可以先alert(person.name); 打印彈出肯定是longen字符串;
理解writable屬性;
現(xiàn)在我們使用Object.defineProperty()方法,對person這個(gè)對象的name屬性值進(jìn)行修改,代碼如下:
alert(person.name); // longen Object.defineProperty(person, "name", { writable: false, value: "tugenhua" }); alert(person.name); // tugenhua person.name = "Greg"; alert(person.name); // tugenhua
如上代碼,我們writable設(shè)置為false的時(shí)候,當(dāng)我們進(jìn)行修改name屬性的時(shí)候,是修改不了的,但是如果我把writable設(shè)置為true或者直接刪掉這行代碼的時(shí)候,是可以修改person中name的值的。如下代碼:
Object.defineProperty(person, "name", { writable: false, value: "tugenhua" }); alert(person.name); // tugenhua person.name = "Greg"; alert(person.name); // Greg
理解configurable屬性
繼續(xù)如上JS代碼如下:
var person = { name: 'longen' }; alert(person.name); // longen Object.defineProperty(person, "name", { configurable: false, value: "tugenhua" }); alert(person.name); // tugenhua delete person.name; alert(person.name); // tugenhua
當(dāng)把configurable設(shè)置為false的時(shí)候,表示是不能通過delete刪除name這個(gè)屬性值的,所以上面的最后一個(gè)彈窗還會(huì)打印出tugenhua這個(gè)字符串的;
但是如果我把configurable設(shè)置為true或者直接不寫這個(gè)屬性的話,那么最后一個(gè)person.name彈窗會(huì)是undefined,如下代碼:
var person = { name: 'longen' }; alert(person.name); // longen Object.defineProperty(person, "name", { value: "tugenhua" }); alert(person.name); // tugenhua delete person.name; alert(person.name); // undefined
理解enumerable屬性
Enumerable屬性表示能否通過for-in循環(huán)中返回?cái)?shù)據(jù),默認(rèn)為true是可以的,如下代碼:
var person = { name: 'longen' }; Object.defineProperty(person, "name", { enumerable: true, value: "tugenhua" }); alert(person.name); // tugenhua for(var i in person) { alert(person[i]); // 可以彈出框 }
如上是把enumerable屬性設(shè)置為true,但是如果把它設(shè)置為fasle的時(shí)候,for-in循環(huán)內(nèi)的數(shù)據(jù)就不會(huì)返回?cái)?shù)據(jù)了,如下代碼:
var person = { name: 'longen' }; Object.defineProperty(person, "name", { enumerable: false, value: "tugenhua" }); alert(person.name); // tugenhua for(var i in person) { alert(person[i]); // 不會(huì)彈出 }
2. 訪問器屬性
訪問器屬性有g(shù)etter和setter函數(shù),在讀取訪問器屬性時(shí),會(huì)調(diào)用getter函數(shù),這個(gè)函數(shù)負(fù)責(zé)返回有效的值,在寫入訪問器屬性時(shí),會(huì)調(diào)用setter函數(shù)并傳入新值,這個(gè)函數(shù)負(fù)責(zé)如何處理數(shù)據(jù),訪問器屬性也有以下4個(gè)特性:
configurable:表示能否通過delete刪除屬性從而重新定義屬性,能否修改屬性的特性,或者能否把屬性修改為訪問器屬性。這個(gè)特性值默認(rèn)為true。
enumerable:表示能否通過 for-in 循環(huán)返回屬性。這個(gè)特性值默認(rèn)為true。
get:在讀取屬性時(shí)調(diào)用的函數(shù),默認(rèn)值為undefined。
set:在寫入屬性時(shí)調(diào)用的函數(shù),默認(rèn)值為undefined。
如下代碼:
var book = { _year: 2004, edit: 1 }; Object.defineProperty(book,"year",{ get: function(){ return this._year; }, set: function(newValue) { if(newValue > 2004) { this._year = newValue; this.edit += newValue - 2004; } } }); book.year = 2005; alert(book.edit); //2
首先我們先定義一個(gè)book對象,有2個(gè)屬性_year和edit,并初始化值,給book對象再新增值year為2005,而訪問器屬性year則包含一個(gè)getter函數(shù)和一個(gè)setter函數(shù),因此先會(huì)調(diào)用set函數(shù),把2005傳給newValue,之后this._year就等于2005,this.edit就等于2了;
目前支持Object.defineProperty方法的瀏覽器有IE9+,F(xiàn)irefox4+,safari5+,chrome和Opera12+;
理解定義多個(gè)屬性
ECMAScript5定義了一個(gè)Object.defineProperties()方法,這個(gè)方法可以一次性定義多個(gè)屬性,該方法接收2個(gè)參數(shù),第一個(gè)參數(shù)是添加或者修改該屬性的對象,第二個(gè)參數(shù)是一個(gè)對象,該對象的屬性與第一個(gè)參數(shù)的對象需要添加或者刪除的屬性一一對應(yīng);
如下代碼:
var book = { _year: 2004, edit: 1 }; Object.defineProperties(book,{ _year: { value: 2015 }, edit: { value: 2 }, year: { get: function(){ return this._year; }, set: function(newValue){ if(newValue > this._year) { this._year = newValue; this.edit += newValue - this._year; } } } });
如上代碼;給book對象設(shè)置了3個(gè)屬性,其中前面兩個(gè)會(huì)覆蓋原有的book的對象的屬性,三個(gè)屬性是添加的;
上面確實(shí)是給對象設(shè)置了多個(gè)屬性了,那么現(xiàn)在我們?nèi)绾巫x取屬性了?
ECMAScript5給我們提供了方法 Object.getOwnPropertyDescriptor()方法,可以取得給定屬性的描述符。該方法接收2個(gè)參數(shù),屬性所在的對象和需要讀取描述符的屬性名稱。返回值也是一個(gè)對象,如果是訪問器屬性,這個(gè)對象的屬性有configurable、enumerable、get 和set;如果是數(shù)據(jù)屬性,這個(gè)對象的屬性有configurable、enumerable、writable 和value。
我們先來看下數(shù)據(jù)屬性,如下代碼獲?。?/p>
var descriptor = Object.getOwnPropertyDescriptor(book, "_year");
console.log(descriptor);
打印出來如下:
Object {value: 2015, writable: true, enumerable: true, configurable: true}
是一個(gè)對象,現(xiàn)在的value變成2015了;
但是如果我們來看下訪問器屬性的話,如下代碼:
var descriptor = Object.getOwnPropertyDescriptor(book, "year");
console.log(descriptor);
打印如下:
就有如上四個(gè)屬性了;
Object.getOwnPropertyDescriptor方法,支持這個(gè)方法的瀏覽器有:
IE9+,firefox4+,safari5+,opera12+和chrome;
理解構(gòu)造函數(shù)
function Dog(name,age) { this.name = name; this.age = age; this.say = function(){ alert(this.name); } }
如上就是一個(gè)構(gòu)造函數(shù),它與普通的函數(shù)有如下區(qū)別:
1.函數(shù)名第一個(gè)首字母需要大寫,為了區(qū)分是構(gòu)造函數(shù)。
2.初始化函數(shù)的時(shí)候需要new下;任何函數(shù),只要它是通過new初始化的,那么他們就可以把它當(dāng)做構(gòu)造函數(shù);
比如如下初始化實(shí)例化2個(gè)對象:
var dog1 = new Dog("wangwang1",'10'); var dog2 = new Dog("wangwang2",'11');
那么我們現(xiàn)在可以打印console.log(dog1.say());打印出來肯定是wangwang1,console.log(dog2.say());打印出來是wangwang2;
dog1和dog2分別保存著Dog的一個(gè)不同的實(shí)例,且這兩個(gè)對象都有一個(gè)constructor(構(gòu)造函數(shù))屬性。該屬性指向Dog,如下代碼:
alert(dog1.constructor === Dog); // true alert(dog2.constructor === Dog); // true
同時(shí)實(shí)例化出來的對象都是Object的實(shí)例,可以通過instanceof 來檢測如下代碼:
alert(dog1 instanceof Object); // true alert(dog2 instanceof Object); // true alert(dog1 instanceof Dog); // true alert(dog2 instanceof Dog); // true
構(gòu)造函數(shù)的缺點(diǎn):就是每個(gè)方法都需要在每個(gè)實(shí)例上重新創(chuàng)建一遍,比如上面的實(shí)例化2個(gè)Dog對象,分別為dog1和dog2,dog1和dog2都有一個(gè)say方法,但是那個(gè)方法不是同一個(gè)Function的實(shí)例,如下代碼:
alert(dog1.say === dog2.say); // false
因此我們需要引入原型模式;原型模式就是要解決一個(gè)共享的問題,我們創(chuàng)建的每個(gè)函數(shù)都有一個(gè)prototype(原型)屬性,這個(gè)屬性是一個(gè)指針,指向一個(gè)對象,而這個(gè)對象的用途就是讓所有的實(shí)例共享屬性和方法;比如還是上面的代碼改造成如下:
function Dog() {}; Dog.prototype = { name: 'wangwang', age:'11', say: function(){ alert(this.name); //wangwang } } var dog1 = new Dog(); dog1.say(); var dog2 = new Dog(); dog2.say(); alert(dog1.say === dog2.say); // true
如上打印 dog1.say === dog2.say,他們共享同一個(gè)方法;為什么會(huì)是這樣的?
我們可以先來理解下原型對象;
不管什么時(shí)候,只要?jiǎng)?chuàng)建了一個(gè)函數(shù),就會(huì)根據(jù)一組特定的規(guī)則為該函數(shù)創(chuàng)建一個(gè)prototype屬性,這個(gè)屬性指向函數(shù)的原型對象;比如上面的函數(shù)Dog,那么就會(huì)為該函數(shù)創(chuàng)建一個(gè)Dog.prototype 這么一個(gè)對象,在默認(rèn)情況下,所有的原型對象都會(huì)自動(dòng)獲得一個(gè)constructor(構(gòu)造函數(shù))屬性.
構(gòu)造函數(shù)的任何一個(gè)實(shí)例都會(huì)指向與該構(gòu)造函數(shù)的原型;比如我們可以通過isPrototypeOf()方法來確定對象是否存在這種關(guān)系;如下代碼:
function Dog() {}; Dog.prototype = { name: 'wangwang', age:'11', say: function(){ alert(this.name); //wangwang } } var dog1 = new Dog(); var dog2 = new Dog(); console.log(Dog.prototype.isPrototypeOf(dog1));//true console.log(Dog.prototype.isPrototypeOf(dog1));//true
也就是說每個(gè)實(shí)例內(nèi)部都有一個(gè)指針指向與Dog.prototype;ECMAScript5增加了一個(gè)新方法,Object.getPrototypeOf();這個(gè)方法可以返回屬性值;還是如上面的代碼:
function Dog() {}; Dog.prototype = { name: 'wangwang', age:'11', say: function(){ alert(this.name); //wangwang } } var dog1 = new Dog(); var dog2 = new Dog(); console.log(Object.getPrototypeOf(dog1) === Dog.prototype); //true console.log(Object.getPrototypeOf(dog1).name);//wangwang
使用Object.getPrototypeOf()可以方便地取得一個(gè)對象的原型,而這在利用原型實(shí)現(xiàn)繼承的情況下是非常重要的。
支持這個(gè)方法的瀏覽器有IE9+、Firefox 3.5+、Safari 5+、Opera 12+和Chrome。
每當(dāng)代碼讀取某個(gè)對象的某個(gè)屬性時(shí),都會(huì)執(zhí)行一次搜索,目標(biāo)是具有給定名字的屬性。搜索首先從對象實(shí)例本身開始。如果在實(shí)例中找到了具有給定名字的屬性,則返回該屬性的值;如果沒有找到,則繼續(xù)搜索指針指向的原型對象,在原型對象中查找具有給定名字的屬性。如果在原型對象中找到了這個(gè)屬性,則返回該屬性的值。
雖然可以通過對象實(shí)例訪問保存在原型中的值,但卻不能通過對象實(shí)例重寫原型中的值。如果我們在實(shí)例中添加了一個(gè)屬性,而該屬性與實(shí)例原型中的一個(gè)屬性同名,那我們就在實(shí)例中創(chuàng)建該屬性,該屬性將會(huì)屏蔽原型中的那個(gè)屬性。
比如如下代碼:
function Dog() {}; Dog.prototype = { name: 'wangwang', age:'11', say: function(){ alert(this.name); //wangwang } } var dog1 = new Dog(); var dog2 = new Dog(); dog1.name = "aa"; console.log(dog1.name);// aa console.log(dog2.name);// wangwang
還是我們剛剛上面說的,對象查找的方式是查找2次,先查找實(shí)例中有沒有這個(gè)屬性,如果對象的實(shí)例有這個(gè)屬性的話,直接返回實(shí)例中的屬性值,否則的話繼續(xù)查找原型中的屬性值,如果有則返回相對應(yīng)的值,否則的話返回undefined,如上我們先給dog1的實(shí)例一個(gè)name屬性,那么再次查找的話,那么查找的是實(shí)例中的name屬性,但是實(shí)例dog2查找的還是原型中的name屬性;但是如果我們需要讓其查找原型的name屬性的話,我們可以使用delete刪除這個(gè)實(shí)例中的name屬性;如下代碼:
function Dog() {}; Dog.prototype = { name: 'wangwang', age:'11', say: function(){ alert(this.name); //wangwang } } var dog1 = new Dog(); var dog2 = new Dog(); dog1.name = "aa"; console.log(dog1.name);// aa console.log(dog2.name);// wangwang delete dog1.name; console.log(dog1.name);// wangwang
但是我們可以使用hasOwnProperty()方法可以檢測一個(gè)屬性是存在實(shí)例中,還是存在原型中,如下測試代碼:
function Dog() {}; Dog.prototype = { name: 'wangwang', age:'11', say: function(){ alert(this.name); //wangwang } } var dog1 = new Dog(); var dog2 = new Dog(); console.log(dog1.hasOwnProperty("name")); // false dog1.name = "aa"; console.log(dog1.name); // aa console.log(dog1.hasOwnProperty("name")); // true console.log(dog2.name); // wangwang console.log(dog2.hasOwnProperty("name")); // false delete dog1.name; console.log(dog1.name); // wangwang console.log(dog1.hasOwnProperty("name")); //false
理解原型與in操作符
有2種方式使用in操作符,單獨(dú)使用和在for-in循環(huán)中使用,在單獨(dú)使用中,in操作符會(huì)在通過對象訪問給定屬性時(shí)返回true,不管它是在實(shí)例中還是在原型中,比如如下代碼:
function Dog() {}; Dog.prototype = { name: 'wangwang', age:'11', say: function(){ alert(this.name); //wangwang } } var dog1 = new Dog(); console.log("name" in dog1); // true dog1.name = "aa"; console.log("name" in dog1); //true
上面代碼中,name屬性無論是在實(shí)例中還是在原型中,結(jié)果都返回true,我們可以通過in和hasOwnProperty()方法來確定屬性是不是在原型當(dāng)中,我們都知道in不管是在實(shí)例中還是在原型中都返回true,而hasOwnProperty()方法是判斷是不是在實(shí)例中,如果在實(shí)例中返回true,那么我們?nèi)》淳筒辉趯?shí)例當(dāng)中了;如下代碼封裝:
function hasPrototypeProperty(object,attr){ return !object.hasOwnProperty(attr) && (attr in object); }
如下測試代碼:
function Dog() {}; Dog.prototype = { name: 'wangwang', age:'11', say: function(){ alert(this.name); //wangwang } } var dog1 = new Dog(); function hasPrototypeProperty(object,attr){ return !object.hasOwnProperty(attr) && (attr in object); } console.log(hasPrototypeProperty(dog1,'name')); //true 在原型中 dog1.name = 'aa'; console.log(hasPrototypeProperty(dog1,'name')); //false 在實(shí)例中
for-in
在使用for-in循環(huán)時(shí),返回的是所有能夠通過對象訪問的,可枚舉的屬性,其中既包括在實(shí)例中的屬性,也包括在原型中的屬性;如果在IE8-下屏蔽了原型中已有的方法,那么在IE8-下不會(huì)有任何反應(yīng);如下代碼:
var obj = { toString: function(){ return "aa"; } }; for(var i in obj){ if(i == "toString") { alert(1); } }
如果我把上面的toString改成toString22的話,就可以在IE下打印出1,否則沒有任何執(zhí)行,那是因?yàn)樗帘瘟嗽椭胁豢擅杜e屬性的實(shí)例屬性不會(huì)在for-in循環(huán)中返回,因?yàn)樵椭幸灿衪oString這個(gè)方法,在IE中,由于其實(shí)現(xiàn)認(rèn)為原型的toString()方法被打上了值為false 的[[Enumerable]]標(biāo)記,因此應(yīng)該跳過該屬性,結(jié)果我們就不會(huì)看到警告框。
要取得對象上所有可枚舉的實(shí)例屬性,可以使用ECMAScript 5 的Object.keys()方法。這個(gè)方法接收一個(gè)對象作為參數(shù),返回一個(gè)包含所有可枚舉屬性的字符串?dāng)?shù)組。
如下代碼演示:
function Dog() {}; Dog.prototype = { name: 'wangwang', age:'11', say: function(){ alert(this.name); //wangwang } } var dog1 = new Dog() var keys = Object.keys(Dog.prototype); console.log(keys);//["name",'age','say']
如上代碼;keys將保存為一個(gè)數(shù)組,這個(gè)順序是在for-in出現(xiàn)的順序,如果我們想要得到所有實(shí)例屬性,無論它是否可枚舉,我們可以使用 Object.getOwnPropertyNames()方法,如下代碼:
function Dog() {}; Dog.prototype = { name: 'wangwang', age:'11', say: function(){ alert(this.name); //wangwang } } var dog1 = new Dog(); var keys = Object.getOwnPropertyNames(Dog.prototype); console.log(keys);//["name",'age','say']
Object.keys()和Object.getOwnProperty-Names()方法都可以用來替代for-in 循環(huán)。支持這兩個(gè)方法的瀏覽器有IE9+、Firefox 4+、Safari 5+、Opera
12+和Chrome。
我們接下來再來理解下原型對象的概念;如下代碼:
function Dog() {}; Dog.prototype = { name: 'wangwang', age:'11', say: function(){ alert(this.name); //wangwang } } var dog1 = new Dog(); console.log(dog1 instanceof Object); // true console.log(dog1 instanceof Dog); // true console.log(dog1.constructor == Dog); // false console.log(dog1.constructor == Object); // true
上面的第三行為什么會(huì)打印false呢?我們知道,每創(chuàng)建一個(gè)函數(shù),就會(huì)同時(shí)創(chuàng)建它的prototype對象。這個(gè)對象會(huì)自動(dòng)獲得constructor屬性,我們實(shí)例化一個(gè)對象的時(shí)候,那是因?yàn)槲覀儧]有給他指定constructor屬性,默認(rèn)情況下它會(huì)重寫prototype對象,因此constructor屬性也就變成了新對象的constructor屬性了,不再指向Dog函數(shù),如果我們需要讓他還是指向與Dog函數(shù)的話,我們可以在Dog.property中添加constructor屬性,如下代碼:
function Dog() {}; Dog.prototype = { constructor: Dog, name: 'wangwang', age:'11', say: function(){ alert(this.name); //wangwang } } var dog1 = new Dog(); console.log(dog1 instanceof Object); // true console.log(dog1 instanceof Dog); // true console.log(dog1.constructor == Dog); // true
理解原型的動(dòng)態(tài)性
比如如下代碼:
function Dog() {}; var dog1 = new Dog(); Dog.prototype.say = function(){ alert(1); } dog1.say(); // 1
我們先實(shí)例化一個(gè)對象后,再給原型添加一個(gè)say方法,再我們使用實(shí)例調(diào)用該方法的時(shí)候也可以調(diào)用的到,這也就是說,實(shí)例會(huì)先搜索該say方法,如果沒有搜索到,那么它會(huì)到原型里面去搜索該方法,如果能查找的到就執(zhí)行,否則就會(huì)報(bào)錯(cuò),沒有這個(gè)方法;
雖然可以隨時(shí)為原型添加方法和屬性,且修改的方法和屬性能從實(shí)例中表現(xiàn)出來,但是如果重寫整個(gè)原型方法那就不行了;如下代碼:
function Dog() {}; var dog1 = new Dog(); Dog.prototype = { constructor: 'Dog', name:'dog', age:'1', say: function(){ alert(this.age); } } dog1.say(); // 報(bào)錯(cuò) var dog1 = new Dog();
實(shí)例化一個(gè)對象時(shí),會(huì)為該實(shí)例指向原型的指針,但是如果重寫該原型的話,那么就會(huì)把該對象與原來的那個(gè)原型切斷關(guān)系,那么繼續(xù)調(diào)用該方法就會(huì)調(diào)用不到,如上面的代碼,如果我再在重寫該原型下面繼續(xù)實(shí)例化該對象Dog,繼續(xù)調(diào)用say方法就正常了;如下代碼:
function Dog() {}; var dog1 = new Dog(); Dog.prototype = { constructor: 'Dog', name:'dog', age:'1', say: function(){ alert(this.age); } } //dog1.say(); // 報(bào)錯(cuò) var dog2 = new Dog(); dog2.say(); // 1
理解原型重寫
我們從上面可知,原型是可以被重寫的,那么原型重寫后造成的問題就是會(huì)改變之前的實(shí)例指針指向原來的原型,那也就是說之前的原型假如有繼承等操作的話,通過重寫后的原型也會(huì)改變,所以在實(shí)際操作的時(shí)候要小心點(diǎn),原型重寫可以使同一個(gè)構(gòu)造器實(shí)例出2個(gè)不同的實(shí)例出來;如下代碼:
function MyObject(){}; var obj1 = new MyObject(); MyObject.prototype.type = 'myObject'; MyObject.prototype.value = "aa"; var obj2 = new MyObject(); MyObject.prototype = { constructor: 'MyObject', type: 'Brid', value:'bb' }; var obj3 = new MyObject(); // 顯示對象的屬性 alert(obj1.type); // myObject alert(obj2.type); // myObject alert(obj3.type); // Brid
如上代碼:obj1與obj2兩個(gè)實(shí)例是指向同一個(gè)原型的,obj3通過修改原型后,指向與新的構(gòu)造函數(shù)的原型;如下測試代碼:
// 顯示實(shí)例的關(guān)系 alert(obj1 instanceof MyObject); // false alert(obj2 instanceof MyObject); // false alert(obj3 instanceof MyObject); // true
我們可能會(huì)有誤解,為什么obj1 與 obj2不是MyObject的實(shí)例呢?我們從代碼中確實(shí)可以看到,他們2個(gè)實(shí)例確實(shí)是MyObject的實(shí)例,那為什么現(xiàn)在不是呢?那我們現(xiàn)在再來看看對象實(shí)例constructor屬性,如下測試代碼:
console.log(obj1 instanceof obj1.constructor); // false
console.log(obj1.constructor === MyObject); // true
第一行打印false,可以看出 該對象obj1不是 obj1.constructor構(gòu)造器,第二行打印true,obj1.constructor的構(gòu)造器還是指向與MyObject對象;如下三行代碼:
alert(obj1 instanceof MyObject); // false
console.log(obj1 instanceof obj1.constructor); // false
console.log(obj1.constructor === MyObject); // true
從上面的三行代碼我們可以總結(jié)出,原型被重寫后,obj1.constructor的構(gòu)造器還是指向與MyObject,但是obj1不是obj1.constructor的構(gòu)造器的實(shí)例,那就是說obj1不是MyObject的實(shí)例;
在javascript中,一個(gè)構(gòu)造器的原型可以被重寫,那就意味著之前的一個(gè)原型被廢棄,在該構(gòu)造器實(shí)例中:
1.舊的實(shí)例使用這個(gè)被廢棄的原型,并受該原型的影響。
2.新創(chuàng)建的實(shí)例則使用重寫后的原型,受新原型的影響。
理解構(gòu)造器重寫
上面我們了解了原型被重寫,下面我們來講解下構(gòu)造器被重寫,繼承待會(huì)再來研究,我們先來看看構(gòu)造器的重寫demo,代碼如下:
function MyObject(){}; var obj1 = new MyObject(); MyObject = function(){}; var obj2 = new MyObject(); console.log(obj1 instanceof MyObject); // false console.log(obj2 instanceof MyObject); // true console.log(obj1 instanceof obj1.constructor); // true
如上代碼 obj1實(shí)例化出來對象被下面的MyObject構(gòu)造器重寫了,因此obj1不是MyObject的實(shí)例,obj2才是MyObject的實(shí)例,那obj1為什么是obj1.constructor的實(shí)例呢?說明構(gòu)造器的重寫不會(huì)影響實(shí)例的繼承關(guān)系。
上面的構(gòu)造器重寫MyObject不是具名函數(shù),下面我們再來看看具名函數(shù)的重寫,代碼如下:
function MyObject(){}; var obj1 = new MyObject(); function MyObject(){}; var obj2 = new MyObject(); console.log(obj1 instanceof MyObject); // true console.log(obj2 instanceof MyObject); // true console.log(obj1 instanceof obj1.constructor); // true
如上代碼;從上面代碼結(jié)構(gòu)來看,obj1與obj2是2個(gè)不同的MyObject()構(gòu)造器的實(shí)例,但是從邏輯上看,后面的MyObject()構(gòu)造器其實(shí)是覆蓋了前面的構(gòu)造器,所以obj1與obj2都是第二個(gè)MyObject的構(gòu)造器的實(shí)例;
因此上面打印的都是true;
原型對象的缺點(diǎn):
1.省略了構(gòu)造函數(shù)傳遞參數(shù),所有實(shí)例在默認(rèn)情況下都取得相同的屬性值和方法,這并不好,比如我想A實(shí)例不需要自己的屬性值,B實(shí)例需要有自己的屬性值和自己的方法,那么原型對象就不能夠滿足需求;
2.原型最大的好處就是可以共享屬性和方法,但是假如我給A實(shí)例化后添加一個(gè)方法后,我不想給B實(shí)例化添加對應(yīng)的方法,但是由于原型都是共享的,所以在B實(shí)例后也有A中添加的方法;
對應(yīng)第二點(diǎn),我們可以看如下demo:
function Dog(){}; Dog.prototype = { constructor: Dog, name: 'aa', values: ["aa",'bb'], say: function(){ alert(this.name); } } var dog1 = new Dog(); dog1.values.push("cc"); console.log(dog1.values); // ["aa","bb","cc"] var dog2 = new Dog(); console.log(dog2.values); // ["aa","bb","cc"]
如上代碼,我給實(shí)例化dog1的values再添加一個(gè)值為cc后,那么原型就變成
[“aa”,”bb”,”cc”]后,如果現(xiàn)在再實(shí)例化dog2后,那么繼續(xù)打印dog2.values的值也一樣為[“aa”,”bb”,”cc”];
理解組合使用構(gòu)造函數(shù)模式和原型模式
構(gòu)造函數(shù)模式用于定義實(shí)例私有屬性,而原型模式可以定義共享的屬性和方法,可以節(jié)省內(nèi)存,同時(shí)可以有自己的私有屬性和方法,這種方法模式使用的最廣;比如如下代碼:
function Dog(name,age){ this.name = name; this.age = age; this.values = ["aa",'bb']; }; Dog.prototype = { constructor: Dog, say: function(){ alert(this.name); } } var dog1 = new Dog("dog1",'12'); dog1.values.push("cc"); console.log(dog1.values); // ["aa","bb","cc"] var dog2 = new Dog("dog2",'14'); console.log(dog2.values); // ["aa","bb"] console.log(dog1.values === dog2.values);//false console.log(dog1.say === dog2.say); //true
還有許多其他的模式,我這邊不一一介紹,需要了解的話,可以看看Javascript設(shè)計(jì)模式那本書;
理解Javascript繼承
一:原型鏈
ECMAScript中有原型鏈的概念,并將原型鏈作為繼承的主要的方法,其思想是讓一個(gè)引用類型去繼承另一個(gè)引用類型的屬性和方法,從上面我們了解到,原型和實(shí)例的關(guān)系,每個(gè)構(gòu)造函數(shù)都有一個(gè)原型對象,原型對象都包含一個(gè)指向構(gòu)造函數(shù)的指針,而實(shí)例都包含一個(gè)指向原型對象的內(nèi)部指針,實(shí)例與構(gòu)造函數(shù)本身沒有什么關(guān)系,比如我們現(xiàn)在讓一個(gè)原型對象等于另一個(gè)類型的實(shí)例,此時(shí)的原型對象將包含一個(gè)指向另一個(gè)類型的指針,相應(yīng)的,另一個(gè)原型中也包含著指向另一個(gè)構(gòu)造函數(shù)的指針,那么層層遞進(jìn),就成了原型鏈;
如下代碼:
function Animal() { this.name = "aa"; } Animal.prototype.fly = function(){ return this.name; }; function Dog() { this.value = "bb"; } Dog.prototype = new Animal(); Dog.prototype.fly = function(){ return this.name; }; var dog1 = new Dog(); console.log(dog1.fly()); // aa
如上代碼:我們先定義了一個(gè)Animal這個(gè)構(gòu)造函數(shù),它有一個(gè)屬性name=”aa”; 且原型定義了一個(gè)方法fly; 接著我定義了Dog這么一個(gè)構(gòu)造函數(shù),且讓其原型等于Animal的實(shí)例,也就是使用這種方式使Dog這個(gè)構(gòu)造函數(shù)繼承了Animal的屬性和方法,因此Dog有Animal這個(gè)構(gòu)造函數(shù)所有的屬性和方法,接著再定義Dog的自己的fly方法,它會(huì)覆蓋原型Animal的方法,且指針還是指向與Animal的,因此this.name =”aa”; 所以當(dāng)我們實(shí)例化Dog的時(shí)候,訪問dog1.fly()方法的時(shí)候,打印出aa;
如上代碼我們知道如果想要A繼承與B的話,那么繼承可以這樣寫:
A.prototype = new B();
還有Dog的fly方法實(shí)際上是對原型Animal的fly方法進(jìn)行重寫;我們繼續(xù)看看dog1實(shí)例與Dog與Animal的關(guān)系;如下代碼:
console.log(dog1 instanceof Dog); // true console.log(dog1 instanceof Animal); // true console.log(dog1 instanceof dog1.constructor); // true console.log(dog1.constructor === Dog); // false console.log(dog1.constructor === Animal); // true
如上可以看到,dog1是Dog與Animal的實(shí)例,dog1還是指向與dog1.constructor,但是dog1的實(shí)例的constructor不再指向與Dog了,而是指向與Animal,這是因?yàn)閐og1.constructor被重寫了的緣故!
通過原型的繼承,我們看到dog1.fly()方法,會(huì)經(jīng)歷如下幾個(gè)搜索步驟,第一先搜索該實(shí)例有沒有fly這個(gè)方法,接著搜索Dog的原型有沒有這個(gè)方法,最后悔搜索Animal這個(gè)prototype這個(gè);最后會(huì)繼續(xù)看Object中有沒有這個(gè)方法,我們都知道所有的對象都是Object的實(shí)例,我們可以看下:
console.log(dog1 instanceof Object); //true
所有函數(shù)默認(rèn)的原型都繼承與Object的實(shí)例,因此默認(rèn)原型都有一個(gè)內(nèi)部指針指向與Object.prototype; 那也就是說所有的自定義類型都會(huì)繼承與toString()方法和valueOf()方法的根本原因,我們知道測試原型與實(shí)例的關(guān)系除了可以使用instanceof之外,我們還可以使用isPrototypeOf()方法, 如下代碼:
console.log(Object.prototype.isPrototypeOf(dog1)); // true console.log(Dog.prototype.isPrototypeOf(dog1)); // true console.log(Animal.prototype.isPrototypeOf(dog1)); // true
注意:1. 子類型有時(shí)候需要重寫超類型的某個(gè)方法,或者需要添加超類型中不存在的某個(gè)方法,給原型添加的方法一定要放在替換原型方法之后;如下代碼:
function Animal() { this.name = "aa"; } Animal.prototype.fly = function(){ return this.name; }; function Dog() { this.value = "bb"; } // 繼承Animal Dog.prototype = new Animal(); // 重寫原型的方法 Dog.prototype.fly = function(){ return this.name; }; // 給自身添加新方法 Dog.prototype.cry = function(){ return false; }; var dog1 = new Dog(); console.log(dog1.fly()); // aa console.log(dog1.cry()); // false
2 . 通過原型鏈實(shí)現(xiàn)繼承時(shí),不能使用對象字面量創(chuàng)建原型方法,因?yàn)檫@樣會(huì)重寫原型鏈;如下代碼:
function Animal() { this.name = "aa"; } Animal.prototype.fly = function(){ return this.name; }; function Dog() { this.value = "bb"; } // 繼承Animal Dog.prototype = new Animal(); // 重寫原型的方法 Dog.prototype = { fly: function(){ return this.name; }, // 給自身添加新方法 cry: function(){ return false; } }; var dog1 = new Dog(); console.log(dog1.fly()); // undefined console.log(dog1 instanceof Animal); // false
如上代碼所示:打印dog1.fly()方法 打印出undefined, 打印 dog1 instanceof Animal 打印false,可知:不能使用對象字面量的方法來實(shí)現(xiàn)重寫原型的方法,因?yàn)檫@樣做會(huì)切斷與原型Animal的關(guān)系,比如現(xiàn)在dog1 不是 Animal的實(shí)例,且dog1的實(shí)例沒有fly這個(gè)方法,因?yàn)樗F(xiàn)在不是繼承了;
使用原型鏈的缺點(diǎn)如下:
1. 我們都知道原型鏈中所有的屬性和方法都會(huì)被所有實(shí)例共享,雖然原型可以解決共享的問題,這是他的優(yōu)點(diǎn),但也是他的缺點(diǎn),比如我給A實(shí)例添加一個(gè)屬性,當(dāng)我實(shí)例化的B的時(shí)候,B也有這個(gè)屬性,如下代碼:
function Animal() { this.values = ["aa",'bb']; } function Dog(){}; Dog.prototype = new Animal(); var dog1 = new Dog(); dog1.values.push("cc"); // 添加cc值 console.log(dog1.values); // [“aa”,”bb”,”cc”]; var dog2 = new Dog(); console.log(dog2.values); // [“aa”,”bb”,”cc”];
2. 在創(chuàng)建子類型的實(shí)例中,不能向超類型中的構(gòu)造函數(shù)傳遞參數(shù)。
理解借用構(gòu)造函數(shù)
針對上面2點(diǎn),因此我們需要借用于構(gòu)造函數(shù);其基本思想是:在子類型構(gòu)造函數(shù)的內(nèi)部調(diào)用超類型的構(gòu)造函數(shù),因此我們可以使用call或者apply的方法來調(diào)用,如下代碼:
function Animal() { this.values = ["aa",'bb']; } function Dog(){ // Dog繼承于Animal Animal.call(this); }; var dog1 = new Dog(); dog1.values.push("cc"); // 添加cc值 console.log(dog1.values); // ['aa','bb','cc'] var dog2 = new Dog(); console.log(dog2.values); // ['aa','bb']
如上代碼:使用call或者apply的方法實(shí)現(xiàn)繼承,可以得到自己的副本values,因此第一次打印出[“aa”,'bb','cc'] 第二次打印出 [“aa”,'bb'];
我們也可以傳遞參數(shù),代碼如下:
function Animal(name) { this.values = ["aa",'bb']; this.name = name; } function Dog(){ // Dog繼承于Animal Animal.call(this,"dog22"); this.age = 22; }; var dog1 = new Dog(); console.log(dog1.name); // dog22 console.log(dog1.age); // 22
但是呢,借用構(gòu)造函數(shù)也有缺點(diǎn);
借用構(gòu)造函數(shù)的缺點(diǎn):
1.構(gòu)造函數(shù)不能復(fù)用;
2.在超類型中定義的屬性或者方法,在子類型中是不可見的,結(jié)果所有類型都只能使用構(gòu)造函數(shù)的模式;
理解組合繼承
需要解決上面的2個(gè)問題,我們可以考慮使用組合繼承的方式來實(shí)現(xiàn),就是指構(gòu)造函數(shù)模式與原型模式組合起來一起使用,其思想就是:使用原型鏈實(shí)現(xiàn)對原型的屬性和方法的繼承,而借用構(gòu)造函數(shù)來實(shí)現(xiàn)對實(shí)例中的屬性的繼承;這樣,既可以通過在原型上定義的方法實(shí)現(xiàn)函數(shù)的復(fù)用,又能保證每個(gè)實(shí)例都有自己的屬性;如下代碼:
function Animal(name) { this.values = ["aa",'bb']; this.name = name; } Animal.prototype.sayName = function(){ return this.name; } function Dog(name,age){ // Dog繼承屬性 Animal.call(this,name); this.age = age; }; // 繼承方法 Dog.prototype = new Animal(); Dog.prototype.constructor = Dog; Dog.prototype.sayAge = function(){ return this.age; } var dog1 = new Dog("dog111",'12'); dog1.values.push("cc"); console.log(dog1.values); // ['aa','bb','cc'] console.log(dog1.sayAge()); // 12 console.log(dog1.sayName()); // dog111 var dog2 = new Dog("dog222",'14'); console.log(dog2.values); // ['aa','bb'] console.log(dog2.sayAge()); // 14 console.log(dog2.sayName());// dog222
如上代碼:Animal構(gòu)造函數(shù)定義了2個(gè)屬性,name和values,Animal原型中定義了一個(gè)方法sayName; Dog構(gòu)造函數(shù)繼承Animal是傳遞了參數(shù)name,然后又定義了自己的age參數(shù),最后將Dog.prototpye = new Animal實(shí)例化Animal,讓其Dog繼承與Animal中的方法,這樣的設(shè)計(jì)使Dog的不同的實(shí)例分別有自己的屬性,同時(shí)又共有相同的方法,也節(jié)省了內(nèi)存;
如上代碼通過方法繼承后,重寫給Dog的constructor指向與Dog;如下代碼:
Dog.prototype.constructor = Dog;
所以最后的Dog的實(shí)例對象的constructor都指向與Dog,我們可以打印如下:
console.log(dog1.constructor === Dog) // true
如果我們把上面的 Dog.prototype.constructor = Dog 注釋掉的話,那么
console.log(dog1.constructor === Dog) // false
就返回false了;
理解原型式繼承
其思想是:創(chuàng)建一個(gè)臨時(shí)性的構(gòu)造函數(shù),然后將其傳入的對象作為該構(gòu)造函數(shù)的原型,最后返回這個(gè)臨時(shí)構(gòu)造函數(shù)的一個(gè)新實(shí)例,如下代碼演示:
function object(obj) { function F() {}; F.prototype = obj; return new F(); }
我們現(xiàn)在可以做一個(gè)demo如下:
var person = { name: 'aa', firends: ['zhangsan','lisi','wangwu'] }; var anthorperson = object(person); anthorperson.name = "bb"; anthorperson.firends.push("zhaoliu"); var aperson2 = object(person); aperson2.name = 'cc'; aperson2.firends.push("longen"); console.log(person.firends); // ["zhangsan", "lisi", "wangwu", "zhaoliu", "longen"];
這樣的原型繼承是必須有一個(gè)對象作為另一個(gè)對象的基礎(chǔ),如果有這么一個(gè)對象的話,可以把它傳遞object()函數(shù);
ECMAScript5中新增Object.create()方法規(guī)范了原型式的繼承,這個(gè)方法接收2個(gè)參數(shù),第一個(gè)是用作新對象的原型的對象,第二個(gè)參數(shù)是可選的,含義是一個(gè)新對象定義額外屬性的對象;比如如下代碼:
var person = { name: 'aa', firends: ['zhangsan','lisi','wangwu'] }; var anthorperson = Object.create(person); anthorperson.name = "bb"; anthorperson.firends.push("zhaoliu"); var bperson = Object.create(person); bperson.name = 'longen'; bperson.firends.push("longen"); console.log(person.firends); // ["zhangsan", "lisi", "wangwu", "zhaoliu", "longen"]
Object.create()方法的第二個(gè)參數(shù)與Object.defineProperties()方法的第二個(gè)參數(shù)格式相同:每個(gè)屬性都是通過自己的描述符定義的。以這種方式指定的任何屬性都會(huì)覆蓋原型對象上的同名屬性。
var person = { name: 'aa', firends: ['zhangsan','lisi','wangwu'] }; var anthorperson = Object.create(person,{ name: { value: 'bb' } }); console.log(anthorperson.name); //bb
目前支持Object.create()方法的瀏覽器有 IE9+,Firefox4+,Safari5+,Opera12+和chrome;
理解寄生組合式繼承
前面我們理解過組合式繼承,組合式繼承是javascript最常用的繼承模式,不過,它也有缺點(diǎn),它會(huì)調(diào)用兩次超類型的構(gòu)造函數(shù),第一次在繼承屬性的時(shí)候,調(diào)用,第二次在繼承方法的時(shí)候調(diào)用,如下代碼:
function Animal(name) { this.values = ["aa",'bb']; this.name = name; } Animal.prototype.sayName = function(){ return this.name; } function Dog(name,age){ // Dog繼承屬性 Animal.call(this,name); this.age = age; }; // 繼承方法 Dog.prototype = new Animal(); Dog.prototype.constructor = Dog; Dog.prototype.sayAge = function(){ return this.age; }
如上面的繼承屬性;Animal.call(this,name);
和繼承方法Dog.prototype = new Animal();
當(dāng)?shù)谝淮卫^承屬性的時(shí)候,會(huì)繼承Animal中的name和values,當(dāng)?shù)诙握{(diào)用繼承方法的時(shí)候,這次又在新對象中創(chuàng)建了實(shí)例屬性name和values,這次創(chuàng)建的屬性會(huì)覆蓋之前繼承的屬性;因此我們可以使用寄生組合式繼承;
寄生組合式繼承的思想是:是通過借用構(gòu)造函數(shù)來繼承屬性,通過原型鏈的混成形式來繼承方法。本質(zhì)上是使用寄生式繼承來繼承超類型中的原型,然后再將結(jié)果指定給子類型的原型,寄生組合式的基本模式如下代碼:
function inheritPrototype(Dog,Animal) { var prototype = object(Animal.prototype); prototype.constructor = Dog; Dog.prototype = prototype; }
inheritPrototype該方法接收2個(gè)參數(shù),子類型構(gòu)造函數(shù)和超類型構(gòu)造函數(shù),在函數(shù)內(nèi)部,先創(chuàng)建一個(gè)超類型的一個(gè)副本,。第二步是為創(chuàng)建的副本添加constructor 屬性,從而彌補(bǔ)因重寫原型而失去的默認(rèn)的constructor 屬性。
最后一步,將新創(chuàng)建的對象(即副本)賦值給子類型的原型。這樣,我們就可以用調(diào)用inherit-Prototype()函數(shù)的語句,去替換前面例子中為子類型原型賦值的語句了,
如下代碼演示:
function object(obj) { function F() {}; F.prototype = obj; return new F(); } function inheritPrototype(Dog,Animal) { var prototype = object(Animal.prototype); prototype.constructor = Dog; Dog.prototype = prototype; } function Animal(name) { this.values = ["aa",'bb']; this.name = name; } Animal.prototype.sayName = function(){ return this.name; } function Dog(name,age){ // Dog繼承屬性 Animal.call(this,name); this.age = age; }; inheritPrototype(Dog,Animal); var dog1 = new Dog("wangwang",12); dog1.values.push("cc"); console.log(dog1.sayName()); // wangwang console.log(dog1.values); // ["aa", "bb", "cc"] var dog2 = new Dog("ww2",14); console.log(dog2.sayName()); // ww2 console.log(dog2.values); // ["aa", "bb"]
如上使用寄生組合繼承只調(diào)用了一次超類型;這就是他們的優(yōu)點(diǎn)!
相關(guān)文章
怎樣用Javascript實(shí)現(xiàn)函數(shù)柯里化與反柯里化
這篇文章主要介紹了怎樣用Javascript實(shí)現(xiàn)函數(shù)柯里化與反柯里化,想了解函數(shù)柯里化的同學(xué),可以參考下2021-04-04JavaScript實(shí)現(xiàn)移動(dòng)端拖動(dòng)元素
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)移動(dòng)端拖動(dòng)元素,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11JS中函數(shù)科里化的背景與應(yīng)用實(shí)例教程
在數(shù)學(xué)和計(jì)算機(jī)科學(xué)中,柯里化是一種將使用多個(gè)參數(shù)的一個(gè)函數(shù)轉(zhuǎn)換成一系列使用一個(gè)參數(shù)的函數(shù)的技術(shù),下面這篇文章主要給大家介紹了JS中函數(shù)科里化的背景與應(yīng)用實(shí)例的相關(guān)資料,需要的朋友可以參考下2022-06-06javascript過濾數(shù)組重復(fù)元素的實(shí)現(xiàn)方法
這篇文章主要介紹了javascript過濾數(shù)組重復(fù)元素的實(shí)現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下2017-05-05javascript+html5實(shí)現(xiàn)仿flash滾動(dòng)播放圖片的方法
這篇文章主要介紹了javascript+html5實(shí)現(xiàn)仿flash滾動(dòng)播放圖片的方法,可實(shí)現(xiàn)類似Flash滾動(dòng)播放的效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04javascript實(shí)現(xiàn)繼承的簡單實(shí)例
這篇文章主要介紹了javascript實(shí)現(xiàn)繼承的簡單實(shí)例的相關(guān)資料,需要的朋友可以參考下2015-07-07