您好,登錄后才能下訂單哦!
本文實(shí)例講述了javascript面向?qū)ο蟪绦蛟O(shè)計(jì)實(shí)踐常用知識(shí)點(diǎn)。分享給大家供大家參考,具體如下:
實(shí)踐一:原型中的引用類型的屬性是共享的
var Person = function(){}; Person.prototype = { info:{ "name":"Tom" } } var p1 = new Person(); var p2 = new Person(); p1.info.name = '我是p1'; p2.info.name = '我是p2'; console.log(p1.info.name); // 我是p2 console.log(p2.info.name); // 我是p2
分析:p1,p2都是實(shí)例化出來(lái)的對(duì)象,p1.info 和p2.info 都是指向同一塊堆內(nèi)存,給p1.info.name賦值,和給p2.info.name賦值修改的都是同一個(gè)地方,由于代碼從上到下依次執(zhí)行,那么在console的時(shí)候自然都是打印出 '我是p2'??偨Y(jié):由此可以看出原型內(nèi)的引用類型的屬性是共享的。
實(shí)踐二:原型的引用類型,當(dāng)實(shí)例化后并重新給引用類型屬性賦值,地址發(fā)生變化。
var Person = function(){}; Person.prototype = { info:{ "name":"Tom" } } var p1 = new Person(); var p2 = new Person(); p1.info = {"name":"哈哈"};; console.log(p1.info.name); // 哈哈 console.log(p2.info.name); // Tom
分析:上面代碼當(dāng)執(zhí)行到 p1.info = {"name":"哈哈"}的時(shí)候,p1的info這個(gè)引用類型的屬性,指向了新的地址。而p2.info 沒(méi)有做出任何修改,還是指向?qū)ο笤椭械哪莻€(gè)地址。
實(shí)踐三:對(duì)象中值類型的屬性不共享
var Person = function(name,age){ this.name = name; this.age = age; }; var p1 = new Person('Tom',10); var p2 = new Person('Lucy','8'); console.log(p1.name); // Tom console.log(p2.name); // Lucy
實(shí)踐四:屬性屏蔽理論
var Person = function () { this.name = '小明', this.buy = function () { console.log('去買面包'); } }; Person.prototype = { name:"原型中的小明", buy:function() { console.log('去買汽水'); }, age:10 } var p = new Person(); // 正常情況下我們?nèi)ピL問(wèn)p里的屬性和方法。 // 可以看出原型中的屬性和方法的優(yōu)先級(jí)沒(méi)有構(gòu)造函數(shù)中的高,如果構(gòu)造函數(shù)中沒(méi)有,會(huì)去原型中查找 console.log(p.name);// 小明 p.buy();// 控制臺(tái)輸出 去買面包 console.log(p.age); // 10 // 如果我們要訪問(wèn)原型中的屬性和方法可以這樣 delete p.name; // 此處會(huì)刪除構(gòu)造函數(shù)中的屬性 console.log(p.name);// 原型中的小明 Person.prototype.buy(); // 控制臺(tái)輸出 去買汽水
實(shí)踐五:對(duì)象中的 hasOwnProperty 方法
var Person = function () { this.name = 'Tom'; } Person.prototype = { age:30 } var p = new Person(); console.log(Person.hasOwnProperty('name')); // true console.log(p.hasOwnProperty('name')); // true console.log(Person.hasOwnProperty('age')); // false console.log(p.hasOwnProperty('age')); // false var ClassRoom = { contain:100, leader:'小明', teacher:'王老師' } console.log(ClassRoom.hasOwnProperty('leader')); // true console.log( p.hasOwnProperty === Object.prototype.hasOwnProperty ); //true console.log( Person.hasOwnProperty === Object.prototype.hasOwnProperty ); //true console.log( ClassRoom.hasOwnProperty === Object.prototype.hasOwnProperty ); //true
分析:上面說(shuō)明了一個(gè)問(wèn)題,hasOwnProperty 這個(gè)方法是看是不是對(duì)象自身下面的屬性,可以用對(duì)象和實(shí)例對(duì)象訪問(wèn),并且只會(huì)去找構(gòu)造函數(shù)和字面量中的屬性并且 hasOwnProperty 繼承自 Object
實(shí)踐六:自定義對(duì)象中的 constructor 和 __proto__(有關(guān)原型鏈的問(wèn)題,我們以后再來(lái)說(shuō))
/* 每個(gè)實(shí)例對(duì)象都會(huì)默認(rèn)生成一個(gè)constructor 和 __proto__ 屬性 這一條不管是內(nèi)置對(duì)象還是自定義對(duì)象都是一樣的 */ function A() {}; var a = new A(); console.log(a.constructor === A); // true 默認(rèn)情況下實(shí)例的constructor指向?qū)嵗臉?gòu)造函數(shù) console.log(a.__proto__ === A.prototype); // true 默認(rèn)情況下,實(shí)例的__proto__屬性指向類的prototype /* 當(dāng)我們修改 constructor 和 __proto__ 屬性時(shí)候 */ function B() {}; // 手動(dòng)修改原型鏈 B.prototype = { __proto__:String.prototype } var b = new B(); // instanceof 用來(lái)判斷obj1是否是obj2的一個(gè)實(shí)例,可見(jiàn)用 instanceof 來(lái)判斷數(shù)據(jù)類型也是不準(zhǔn)確的。 // 這里涉及到繼承,而js面向?qū)ο笾械睦^承就是通過(guò)原型鏈來(lái)實(shí)現(xiàn)的。 console.log(b instanceof B); // true console.log(b instanceof String); // true console.log(b instanceof Object); // true console.log(b.constructor === B); // false 此處b的構(gòu)造函數(shù)不是B了,因?yàn)樵玩溨傅絊tring上去了。 console.log(b.constructor === String); //true // 手動(dòng)修改b的constructor ,如果自己不設(shè)置,那么就會(huì)去尋找原型鏈,如上 //b.constructor = B; 或者 B.prototype.constructor = B; // 手動(dòng)設(shè)置后,就會(huì)按照設(shè)置的來(lái)走,如下: b.constructor = B; console.log(b.constructor === B); // true console.log(b.__proto__=== B.prototype); // true console.log(B.prototype.__proto__=== String.prototype); // true; // 下面這兩個(gè)也是原型鏈的內(nèi)容 // B是函數(shù),函數(shù)的constructor 是 Function,函數(shù)的__proto__ 是Function.prototype console.log(B.constructor === Function); // true console.log(B.__proto__ === Function.prototype); // true
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。