本文實例講述了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分析：上面說明了一個問題，hasOwnProperty 這個方法是看是不是對象自身下面的屬性，可以用對象和實例對象訪問，并且只會去找構造函數和字面量中的屬性并且 hasOwnProperty 繼承自 Object
實踐六：自定義對象中的 constructor 和 __proto__(有關原型鏈的問題，我們以后再來說)
/* 每個實例對象都會默認生成一個constructor 和 __proto__ 屬性 這一條不管是內置對象還是自定義對象都是一樣的 */function A() {};var a = new A();console.log(a.constructor === A); // true 默認情況下實例的constructor指向實例的構造函數console.log(a.__proto__ === A.prototype); // true 默認情況下，實例的__proto__屬性指向類的prototype/* 當我們修改 constructor 和 __proto__ 屬性時候 */function B() {};// 手動修改原型鏈B.prototype = { __proto__:String.prototype}var b = new B();// instanceof 用來判斷obj1是否是obj2的一個實例，可見用 instanceof 來判斷數據類型也是不準確的。// 這里涉及到繼承，而js面向對象中的繼承就是通過原型鏈來實現的。console.log(b instanceof B); // trueconsole.log(b instanceof String); // trueconsole.log(b instanceof Object); // trueconsole.log(b.constructor === B); // false 此處b的構造函數不是B了，因為原型鏈指到String上去了。console.log(b.constructor === String); //true// 手動修改b的constructor ,如果自己不設置，那么就會去尋找原型鏈，如上//b.constructor = B; 或者 B.prototype.constructor = B;// 手動設置后，就會按照設置的來走，如下：b.constructor = B;console.log(b.constructor === B); // trueconsole.log(b.__proto__=== B.prototype); // trueconsole.log(B.prototype.__proto__=== String.prototype); // true;// 下面這兩個也是原型鏈的內容// B是函數，函數的constructor 是 Function，函數的__proto__ 是Function.prototypeconsole.log(B.constructor === Function); // trueconsole.log(B.__proto__ === Function.prototype); // true感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.VeVB.COm/code/HtmlJsRun測試上述代碼運行效果。
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
