JavaScript知識點總結(十一)之js中的Object類詳解

2019-11-20 09:50:25

字體：大中小

來源：轉載

供稿：網友

JavaScript中的Object對象，是JS中所有對象的基類，也就是說JS中的所有對象都是由Object對象衍生的。Object對象主要用于將任意數據封裝成對象形式。

一、Object類介紹

　　Object類是所有JavaScript類的基類(父類)，提供了一種創建自定義對象的簡單方式，不再需要程序員定義構造函數。

二、Object類主要屬性

　　1.constructor：對象的構造函數。

　　2.prototype：獲得類的prototype對象，static性質。

三、Object類主要方法

　　1.hasOwnProperty(propertyName)

　　判斷對象是否有某個特定的屬性。必須用字符串指定該屬性，例如，obj.hasOwnProperty("name")，返回布爾值。此方法無法檢查該對象的原型鏈中是否具有該屬性；該屬性必須是對象本身的一個成員。

var str ="";alert("str.hasOwnProperty(/"split/")的結果是："+str.hasOwnProperty("split")); //return falsealert("String.prototype.hasOwnProperty(/"split/")的結果是："+String.prototype.hasOwnProperty("split"));//return true

運行結果：

　　hasOwnProperty的用法不僅僅在此，在Jquery中在編寫插件中，少不了的一步，就是初始化參數，其中一個很重要的方法就是$.extend();他的原理就是應用了hasOwnProperty()方法；利用for in 循環遍歷對象成員中，有沒有相同名稱的對象成員，有的話就用這個新的對象成員替換掉舊的，通過這種方式，我們就可以通過修改方法中的參數變化，從而控制程序的流程，而對于那些沒有改變的部分，仍使用默認值進行控制，我們自己也可以簡單的模擬一下這個extend函數，如下

function extend(target,source){//target 舊的 source新的　　for (var i in source){if(target.hasOwnProperty(i)){target[i]=source[i];}}return target;}var a={"first":,"second":"lyl","third":"bob"};var b={"third":"leo"};extend(a,b);for(var i in a){alert(a[i]);//原本是bob,現在變成leo了}

　　2.isPrototypeOf(object)

　　判斷該對象是否為另一個對象的原型。

　　obj1.isPrototypeOf(obj2);

　　obj1是一個對象的實例；obj2是另一個將要檢查其原型鏈的對象。原型鏈可以用來在同一個對象類型的不同實例之間共享功能。如果obj2的原型鏈中包含 obj1，那么isPrototypeOf 方法返回 true。如果obj2不是一個對象或者obj1沒有出現在obj2中的原型鏈中，isPrototypeOf 方法將返回 false。

<script type="text/javascript">function foo(){this.name = 'foo';}function bar(){}bar.prototype = new foo();var goo = new bar();alert(goo.name); //fooalert(bar.prototype.isPrototypeOf(goo));//true，在bar的原型鏈中有當前對象goo，則isPrototypeOf方法返回true</script>

　　3.propertyIsEnumerable(propertyName)

　　通過這個方法我們可以檢測出這個對象成員是否是可遍歷的，如果是可遍歷出來的，證明這個對象就是可以利用for in 循環進行遍歷的，

　　格式如下：obj.propertyIsEnumerable(propertyName)

　　如果 propertyName存在于 obj中且可以使用一個 For…In 循環窮舉出來，那么 propertyIsEnumerable 屬性返回 true。如果 object 不具有所指定的屬性或者所指定的屬性不是可列舉的，那么 propertyIsEnumerable 屬性返回 false。典型地，預定義的屬性不是可列舉的，而用戶定義的屬性總是可列舉的。

　　4.toString()：返回對象對應的字符串

　　5.valueOf()：返回對象對應的原始類型

　　以上5個方法都是Object.prototype上定義的，ECMAScript 中的所有對象都由Object繼承而來，所以在ECMAScript上的所有對象都具有以幾個方法

測試代碼1：

var p = new Object(); //通過Object直接創建對象//為p對象動態添加屬性p.Age=;p.Name="孤傲蒼狼";//擴展Object類，為Object類添加一個Show方法Object.prototype.Show=function(){alert(this.Age+"/t"+this.Name);}alert(p.Age);p.Show();document.write("<pre>");document.writeln("p.constructor："+p.constructor);//得到對象的構造函數document.writeln("Object.prototype："+Object.prototype);//得到prototype對象，prototype是靜態屬性，只能通過"類名.prototype"去訪問document.writeln("p.isPrototypeOf(p)："+p.isPrototypeOf(p));document.writeln("p.hasOwnProperty(/"Age/")："+p.hasOwnProperty("Age"));document.writeln("p.propertyIsEnumerable(/"Age/")："+p.propertyIsEnumerable("Age"));document.writeln("p.toString()："+p.toString());document.writeln("p.valueOf()："+p.valueOf());document.write("</pre>");

運行結果：

測試代碼2：

var Car = function(){};Car.prototype.hello = function(){alert("hello car");};var car = new Car();car.f = function() {alert("自定義方法");}document.write("<pre>");document.writeln("car.hasOwnProperty(/"f/")的結果是："+car.hasOwnProperty("f"));//ture，car對象有f方法document.writeln("car.propertyIsEnumerable(/"f/")的結果是："+car.propertyIsEnumerable("f"));//ture，car對象有f方法，f方法是可以被枚舉的document.writeln("car.hasOwnProperty(/"hello/")"+car.hasOwnProperty("hello")); // false，因為car本身沒有hello方法document.writeln("car.propertyIsEnumerable(/"hello/")的結果是："+car.propertyIsEnumerable("hello")); // false，沒有這個方法當然不能枚舉document.writeln("car.constructor.prototype.hasOwnProperty(/"hello/")的結果是："+car.constructor.prototype.hasOwnProperty("hello"));// true，car的類Car的原型有hello方法document.writeln("car.constructor.prototype.propertyIsEnumerable(/"hello/")的結果是："+car.constructor.prototype.propertyIsEnumerable("hello"));// true, car的類的Car的原型hello方法是可以被枚舉的document.writeln("Car.prototype.hasOwnProperty(/"hello/")的結果是："+Car.prototype.hasOwnProperty("hello"));// true，car的類Car的原型有hello方法document.writeln("Car.prototype.propertyIsEnumerable(/"hello/")的結果是："+Car.prototype.propertyIsEnumerable("hello"));document.write("</pre>");

運行結果：