本文實例講述了javascript面向對象程序設計實踐常用知識點。分享給大家供大家參考,具體如下:
實踐一:原型中的引用類型的屬性是共享的
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); // 我是p2console.log(p2.info.name); // 我是p2分析:p1,p2都是實例化出來的對象,p1.info 和p2.info 都是指向同一塊堆內存,給p1.info.name賦值,和給p2.info.name賦值修改的都是同一個地方,由于代碼從上到下依次執行,那么在console的時候自然都是打印出 '我是p2'。總結:由此可以看出原型內的引用類型的屬性是共享的。
實踐二:原型的引用類型,當實例化后并重新給引用類型屬性賦值,地址發生變化。
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分析:上面代碼當執行到 p1.info = {"name":"哈哈"}的時候,p1的info這個引用類型的屬性,指向了新的地址。而p2.info 沒有做出任何修改,還是指向對象原型中的那個地址。
實踐三:對象中值類型的屬性不共享
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); // Tomconsole.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();// 正常情況下我們去訪問p里的屬性和方法。// 可以看出原型中的屬性和方法的優先級沒有構造函數中的高,如果構造函數中沒有,會去原型中查找console.log(p.name);// 小明p.buy();// 控制臺輸出 去買面包console.log(p.age); // 10// 如果我們要訪問原型中的屬性和方法可以這樣delete p.name; // 此處會刪除構造函數中的屬性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')); // trueconsole.log(p.hasOwnProperty('name')); // trueconsole.log(Person.hasOwnProperty('age')); // falseconsole.log(p.hasOwnProperty('age')); // falsevar ClassRoom = {  contain:100,  leader:'小明',  teacher:'王老師'}console.log(ClassRoom.hasOwnProperty('leader')); // trueconsole.log( p.hasOwnProperty === Object.prototype.hasOwnProperty ); //trueconsole.log( Person.hasOwnProperty === Object.prototype.hasOwnProperty ); //trueconsole.log( ClassRoom.hasOwnProperty === Object.prototype.hasOwnProperty ); //true            
新聞熱點
疑難解答
圖片精選