javascript面向?qū)ο蟪绦蛟O(shè)計實踐常用知識點總結(jié)

本文實例講述了javascript面向?qū)ο蟪绦蛟O(shè)計實踐常用知識點。分享給大家供大家參考，具體如下：

創(chuàng)新互聯(lián)專注于金東網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。熱誠為您提供金東營銷型網(wǎng)站建設(shè)，金東網(wǎng)站制作、金東網(wǎng)頁設(shè)計、金東網(wǎng)站官網(wǎng)定制、微信小程序開發(fā)服務(wù)，打造金東網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供金東網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

實踐一：原型中的引用類型的屬性是共享的

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都是實例化出來的對象，p1.info 和p2.info 都是指向同一塊堆內(nèi)存，給p1.info.name賦值，和給p2.info.name賦值修改的都是同一個地方，由于代碼從上到下依次執(zhí)行，那么在console的時候自然都是打印出 '我是p2'?？偨Y(jié)：由此可以看出原型內(nèi)的引用類型的屬性是共享的。

實踐二：原型的引用類型，當(dāng)實例化后并重新給引用類型屬性賦值，地址發(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":"哈哈"}的時候，p1的info這個引用類型的屬性，指向了新的地址。而p2.info 沒有做出任何修改，還是指向?qū)ο笤椭械哪莻€地址。

實踐三：對象中值類型的屬性不共享

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

實踐四：屬性屏蔽理論

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問p里的屬性和方法。
// 可以看出原型中的屬性和方法的優(yōu)先級沒有構(gòu)造函數(shù)中的高，如果構(gòu)造函數(shù)中沒有，會去原型中查找
console.log(p.name);// 小明
p.buy();// 控制臺輸出 去買面包
console.log(p.age); // 10
// 如果我們要訪問原型中的屬性和方法可以這樣
delete p.name; // 此處會刪除構(gòu)造函數(shù)中的屬性
console.log(p.name);// 原型中的小明
Person.prototype.buy(); // 控制臺輸出 去買汽水

實踐五：對象中的 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

分析：上面說明了一個問題，hasOwnProperty 這個方法是看是不是對象自身下面的屬性，可以用對象和實例對象訪問，并且只會去找構(gòu)造函數(shù)和字面量中的屬性并且 hasOwnProperty 繼承自 Object

實踐六：自定義對象中的 constructor 和 __proto__(有關(guān)原型鏈的問題，我們以后再來說)

/* 每個實例對象都會默認生成一個constructor 和 __proto__ 屬性 這一條不管是內(nèi)置對象還是自定義對象都是一樣的 */
function A() {};
var a = new A();
console.log(a.constructor === A); // true 默認情況下實例的constructor指向?qū)嵗臉?gòu)造函數(shù)
console.log(a.__proto__ === A.prototype); // true 默認情況下，實例的__proto__屬性指向類的prototype
/* 當(dāng)我們修改 constructor 和 __proto__ 屬性時候 */
function B() {};
// 手動修改原型鏈
B.prototype = {
 __proto__:String.prototype
}
var b = new B();
// instanceof 用來判斷obj1是否是obj2的一個實例，可見用 instanceof 來判斷數(shù)據(jù)類型也是不準確的。
// 這里涉及到繼承，而js面向?qū)ο笾械睦^承就是通過原型鏈來實現(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了，因為原型鏈指到String上去了。
console.log(b.constructor === String); //true
// 手動修改b的constructor ,如果自己不設(shè)置，那么就會去尋找原型鏈，如上
//b.constructor = B; 或者 B.prototype.constructor = B;
// 手動設(shè)置后，就會按照設(shè)置的來走，如下：
b.constructor = B;
console.log(b.constructor === B); // true
console.log(b.__proto__=== B.prototype); // true
console.log(B.prototype.__proto__=== String.prototype); // true;
// 下面這兩個也是原型鏈的內(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代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

分享名稱：javascript面向?qū)ο蟪绦蛟O(shè)計實踐常用知識點總結(jié)
瀏覽地址：http://weahome.cn/article/jhhspo.html

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

javascript面向?qū)ο蟪绦蛟O(shè)計實踐常用知識點總結(jié)

其他資訊

網(wǎng)站制作

企業(yè)服務(wù)

網(wǎng)站建設(shè)

服務(wù)器托管