重讀Javascript之Object

Alex 發(fā)布于2019-08-19 17:18 / 959人閱讀

摘要：對(duì)象是中最常的內(nèi)置對(duì)象之一。為了節(jié)省內(nèi)存，使用一個(gè)共享的構(gòu)造器使用更安全的引用如果不是或，拋出一個(gè)異常。使創(chuàng)建的一個(gè)新的對(duì)象為，就和通過(guò)表達(dá)式創(chuàng)建一個(gè)新對(duì)象一樣，是標(biāo)準(zhǔn)內(nèi)置的構(gòu)造器名設(shè)置的內(nèi)部屬性為。方法返回一個(gè)該對(duì)象的字符串表示。

Object

對(duì)象是Javascript中最常的內(nèi)置對(duì)象之一。除了null 和 undefined，其他的所有的都可以轉(zhuǎn)換為對(duì)象?？梢园褜?duì)象看成含有鍵值一種數(shù)據(jù)結(jié)構(gòu)，鍵稱為對(duì)象的屬性（只能是數(shù)字或者字符串），而值可以其他的任何類型。

例子

對(duì)象是永遠(yuǎn)引用類型

//對(duì)象是永遠(yuǎn)引用類型，對(duì)象名指向內(nèi)存中的某個(gè)位置,而不是復(fù)制值。
var studentA = {
    name: "sundway"
}
var studentB = studentA;
studentB.name = "modify";
console.log(studentA.name);        // "modify"
console.log(studentB.name);        // "modify"

/*studentA和studentB同時(shí)是對(duì)內(nèi)存中的一個(gè)引用，所以studentB.name的更改是對(duì)studentB.name和studentA.name的共同更改*/

對(duì)象的屬性只能是字符串或者數(shù)字。

var studentA = {
    "name": "sundway" //“name”可寫成name
}
var studentA = {
    1 : "sundway"
}
console.log(studentA[1]); // 輸出"sundway"。
/*當(dāng)屬性為數(shù)字時(shí)，不能通過(guò).運(yùn)算符去讀取屬性值，只能通過(guò)[]去讀取屬性值。*/

Javascript所有的都可以表現(xiàn)的像對(duì)象，但只有null 和 undefined比較特殊。

/*經(jīng)常會(huì)有這樣的誤解，數(shù)字字面量不能當(dāng)作對(duì)象使用。其實(shí)主要原因Javascript解析器將數(shù)字后面和.運(yùn)算符當(dāng)成浮點(diǎn)類型的字面量。*/
2.toString(); // Uncaught SyntaxError
2..toString(); // the second point is correctly recognized
2 .toString(); // note the space left to the dot
(2).toString(); // 2 is evaluated first

屬性

屬性描述符：屬性描述符有兩種主要形式，數(shù)據(jù)描述符（configurable、enumerable、value、writable）和存取描述（configurable、enumerable、get、set）符。數(shù)據(jù)描述符是一個(gè)擁有可寫或不可寫值的屬性。存取描述符是由一對(duì) getter-setter 函數(shù)功能來(lái)描述的屬性。描述符必須是兩種形式之一；不能同時(shí)是兩者。(注：polymer和vue等庫(kù)底層貌似通過(guò)get和set實(shí)現(xiàn)雙向綁定)

Object.prototype

Object.prototype是一個(gè)原型對(duì)象，在JavaScript中，所有的對(duì)象都是基于 Object；所有的對(duì)象都繼承了Object.prototype的屬性和方法，它們可以被覆蓋（除了以null為原型的對(duì)象，如 Object.create(null)）；

Object.prototype.constructor

返回一個(gè)指向創(chuàng)建了該對(duì)象原型的函數(shù)引用。需要注意的是，該屬性的值是那個(gè)函數(shù)本身，而不是一個(gè)包含函數(shù)名稱的字符串。

Object.prototype.__proto__

一個(gè)對(duì)象的proto 屬性和自己的內(nèi)部屬性[[Prototype]]指向一個(gè)相同的值 (通常稱這個(gè)值為原型),原型的值可以是一個(gè)對(duì)象值也可以是null(比如說(shuō)Object.prototype.proto的值就是null).該屬性可能會(huì)引發(fā)一些錯(cuò)誤,因?yàn)橛脩艨赡軙?huì)不知道該屬性的特殊性,而給它賦值,從而改變了這個(gè)對(duì)象的原型. 如果需要訪問(wèn)一個(gè)對(duì)象的原型,應(yīng)該使用方法Object.getPrototypeOf.

方法 Object.create ecma-262規(guī)范：

Object.create ( O [ , Properties ] )
The create function creates a new object with a specified prototype. When the create function is called, the following steps are taken:

If Type(O) is neither Object nor Null, throw a TypeError exception.

Let obj be ObjectCreate(O).

If the argument Properties is present and not undefined, then
Return ObjectDefineProperties(obj, Properties).

Return obj.

Polyfill (基于Object.prototype.hasOwnProperty。)

if(typeof Object.create != "function"){
    Object.create = (function(){
        //為了節(jié)省內(nèi)存，使用一個(gè)共享的構(gòu)造器
        function Temp() {};
        
        // 使用 Object.prototype.hasOwnProperty 更安全的引用 
        var hasOwn = Object.prototype.hasOwnProperty;
        
        return function (O) {
          // 1. 如果 O 不是 Object 或 null，拋出一個(gè) TypeError 異常。
          if (typeof O != "object") {
            throw TypeError("Object prototype may only be an Object or null");
          }

          // 2. 使創(chuàng)建的一個(gè)新的對(duì)象為 obj ，就和通過(guò)
          //    new Object() 表達(dá)式創(chuàng)建一個(gè)新對(duì)象一樣，
          //    Object是標(biāo)準(zhǔn)內(nèi)置的構(gòu)造器名
          // 3. 設(shè)置 obj 的內(nèi)部屬性 [[Prototype]] 為 O。
          Temp.prototype = O;
          var obj = new Temp();
          Temp.prototype = null; // 不要保持一個(gè) O 的雜散引用（a stray reference）...

          // 4. 如果存在參數(shù) Properties ，而不是 undefined ，
          //    那么就把參數(shù)的自身屬性添加到 obj 上，就像調(diào)用
          //    攜帶obj ，Properties兩個(gè)參數(shù)的標(biāo)準(zhǔn)內(nèi)置函數(shù)
          //    Object.defineProperties() 一樣。
          if (arguments.length > 1) {
            // Object.defineProperties does ToObject on its first argument.
            var Properties = Object(arguments[1]);
            for (var prop in Properties) {
              if (hasOwn.call(Properties, prop)) {
                obj[prop] = Properties[prop];
              }
            }
          }

          // 5. 返回 obj
          return obj;
        };
    })()
}

Object.is()

Object.is()［ES6]方法用來(lái)判斷兩個(gè)值是否是同一個(gè)值。

ecma-262規(guī)范：

Object.is ( value1, value2 )
When the is function is called with arguments value1 and value2 the following steps are 
taken:
Return SameValue(value1, value2).

以上規(guī)范中最終返回SameValue(x, y)，而ecma-262規(guī)范中對(duì)SameValue(x, y)規(guī)范是：

 SameValue(value1, value2) 
The internal comparison abstract operation SameValue(x, y), where x and y are ECMAScript language values, produces true or false. Such a comparison is performed as follows:

ReturnIfAbrupt(x).

ReturnIfAbrupt(y).

If Type(x) is different from Type(y), return false.

If Type(x) is Undefined, return true.

If Type(x) is Null, return true.


If Type(x) is Number, then

If x is NaN and y is NaN, return true.

If x is +0 and y is ?0, return false.

If x is ?0 and y is +0, return false.

If x is the same Number value as y, return true.

Return false.




If Type(x) is String, then
If x and y are exactly the same sequence of code units (same length and same code units > at corresponding indices) return true; otherwise, return false.



If Type(x) is Boolean, then
If x and y are both true or both false, return true; otherwise, return false.



If Type(x) is Symbol, then
If x and y are both the same Symbol value, return true; otherwise, return false.


Return true if x and y are the same Object value. Otherwise, return false.


NOTE :This algorithm differs from the Strict Equality Comparison Algorithm (7.2.13) in its treatment of signed zeroes and NaNs.

上面提到這個(gè)算法和嚴(yán)格比較算法(===)有所不同，我們可以標(biāo)出幾個(gè)不同的地方，然后在嚴(yán)格比較算法(===)的基礎(chǔ)上實(shí)現(xiàn)SameValue(value1, value2)，同時(shí)也可以實(shí)現(xiàn)Object.is ( value1, value2 )。

 Strict Equality Comparison 
The comparison x === y, where x and y are values, produces true or false. Such a comparison > is performed as follows:

If Type(x) is different from Type(y), return false.

If Type(x) is Undefined, return true.

If Type(x) is Null, return true.


If Type(x) is Number, then

If x is NaN, return false.

If y is NaN, return false.

If x is the same Number value as y, return true.

If x is +0 and y is ?0, return true.

If x is ?0 and y is +0, return true.

Return false.




If Type(x) is String, then

If x and y are exactly the same sequence of code units (same length and same code units at corresponding indices), return true.

Else, return false.
If Type(x) is Boolean, then

If x and y are both true or both false, return true.

Else, return false.



If x and y are the same Symbol value, return true.

If x and y are the same Object value, return true.

Return false.

比較SameValue(value1, value2) 和 Strict Equality Comparison，Strict Equality Comparison不能區(qū)分兩個(gè)不同的數(shù)字 -0 和 +0，還會(huì)把兩個(gè) NaN 看成是不相等的。

Polyfill(基于===)

  Object.is = function(x, y) {
    // SameValue algorithm
    if (x === y) { // Steps 1-5, 7-10
      // Steps 6.b-6.e: +0 != -0
      return x !== 0 || 1 / x === 1 / y;
    } else {
      // Step 6.a: NaN == NaN
      return x !== x && y !== y;
    }
  };

Object.assign ( target, ...sources )

Object.assign()[ES6] 方法可以把任意多個(gè)的源對(duì)象所擁有的自身可枚舉屬性拷貝給目標(biāo)對(duì)象，然后返回目標(biāo)對(duì)象。

 Object.assign ( target, ...sources ) 
The assign function is used to copy the values of all of the enumerable own properties from > one or more source objects to a target object. When the assign function is called, the > 
following steps are taken:

Let to be ToObject(target).

ReturnIfAbrupt(to).

If only one argument was passed, return to.

Let sources be the List of argument values starting with the second argument.


For each element nextSource of sources, in ascending index order,

If nextSource is undefined or null, let keys be an empty List.


Else,

Let from be ToObject(nextSource).

Let keys be from.[[OwnPropertyKeys]]().

ReturnIfAbrupt(keys).






Repeat for each element nextKey of keys in List order,

Let desc be from.[GetOwnProperty].

ReturnIfAbrupt(desc).


if desc is not undefined and desc.[[Enumerable]] is true, then

Let propValue be Get(from, nextKey).

ReturnIfAbrupt(propValue).

Let status be Set(to, nextKey, propValue, true).

ReturnIfAbrupt(status).





Return to.


The length property of the assign method is 2.

Ployfill

由于 ES5 里壓根就沒有 symbol 這種數(shù)據(jù)類型，所以這個(gè) polyfill 也沒必要去支持 symbol 屬性（意思就是說(shuō)，有 symbol 的環(huán)境一定有原生的 Object.assign）：

if (!Object.assign) {
  Object.defineProperty(Object, "assign", {
    enumerable: false,
    configurable: true,
    writable: true,
    value: function(target, firstSource) {
      "use strict";
      if (target === undefined || target === null)
        throw new TypeError("Cannot convert first argument to object");
      var to = Object(target);
      for (var i = 1; i < arguments.length; i++) {
        var nextSource = arguments[i];
        if (nextSource === undefined || nextSource === null) continue;
        var keysArray = Object.keys(Object(nextSource));
        for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
          var nextKey = keysArray[nextIndex];
          var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
          if (desc !== undefined && desc.enumerable) to[nextKey] = nextSource[nextKey];
        }
      }
      return to;
    }
  });
}

Demo

拷貝 symbol 類型的屬性

var o1 = { a: 1 };
var o2 = { [Symbol("foo")]: 2 };

var obj = Object.assign({}, o1, o2);
console.log(obj); // Object {a: 1, Symbol(foo): 2}

繼承屬性和不可枚舉屬性是不能拷貝的

var obj = Object.create({foo: 1}, { // foo 是個(gè)繼承屬性。
    bar: {
        value: 2  // bar 是個(gè)不可枚舉屬性。
    },
    baz: {
        value: 3,
        enumerable: true  
    }
});
var copy = Object.assign({}, obj);
console.log(copy); //  Object {baz: 3}

原始值會(huì)被隱式轉(zhuǎn)換成其包裝對(duì)象

var v1 = "123";
var v2 = true;
var v3 = 10;
var v4 = Symbol("foo")

var obj = Object.assign({}, v1, null, v2, undefined, v3, v4); 
// 源對(duì)象如果是原始值，會(huì)被自動(dòng)轉(zhuǎn)換成它們的包裝對(duì)象，
// 而 null 和 undefined 這兩種原始值會(huì)被完全忽略。
// 注意，只有字符串的包裝對(duì)象才有可能有自身可枚舉屬性。
console.log(obj); // { "0": "1", "1": "2", "2": "3" }

拷貝屬性過(guò)程中發(fā)生異常

var target = Object.defineProperty({}, "foo", {
    value: 1,
    writeable: false
}); // target 的 foo 屬性是個(gè)只讀屬性。

Object.assign(target, {bar: 2}, {foo2: 3, foo: 3, foo3: 3}, {baz: 4});
// TypeError: "foo" is read-only
// 注意這個(gè)異常是在拷貝第二個(gè)源對(duì)象的第二個(gè)屬性時(shí)發(fā)生的。

console.log(target.bar);  // 2，說(shuō)明第一個(gè)源對(duì)象拷貝成功了。
console.log(target.foo2); // 3，說(shuō)明第二個(gè)源對(duì)象的第一個(gè)屬性也拷貝成功了。
console.log(target.foo);  // 1，只讀屬性不能被覆蓋，所以第二個(gè)源對(duì)象的第二個(gè)屬性拷貝失敗了。
console.log(target.foo3); // undefined，異常之后 assign 方法就退出了，第三個(gè)屬性是不會(huì)被拷貝到的。
console.log(target.baz);  // undefined，第三個(gè)源對(duì)象更是不會(huì)被拷貝到的。

Object.keys(obj)

Object.keys() 方法會(huì)返回一個(gè)由給定對(duì)象的所有可枚舉自身屬性的屬性名組成的數(shù)組，數(shù)組中屬性名的排列順序和使用for-in循環(huán)遍歷該對(duì)象時(shí)返回的順序一致（兩者的主要區(qū)別是 for-in 還會(huì)遍歷出一個(gè)對(duì)象從其原型鏈上繼承到的可枚舉屬性）。

Object.defineProperty(obj, prop, descriptor)

Object.defineProperty() 方法直接在一個(gè)對(duì)象上定義一個(gè)新屬性，或者修改一個(gè)已經(jīng)存在的屬性，并返回這個(gè)對(duì)象。

Object.defineProperties(obj, props)

Object.defineProperties() 方法在一個(gè)對(duì)象上添加或修改一個(gè)或者多個(gè)自有屬性，并返回該對(duì)象。

Object.freeze(obj)

Object.freeze() 方法可以凍結(jié)一個(gè)對(duì)象。也就是說(shuō)，這個(gè)對(duì)象永遠(yuǎn)是不可變的.

Object.isFrozen(obj)

Object.isFrozen() 方法判斷一個(gè)對(duì)象是否被凍結(jié)（frozen）。ES5中規(guī)范和ES6有些不同：

If Type(O) is not Object throw a TypeError exception.(ES5)
If Type(O) is not Object, return true.(ES6)

所以O(shè)bject.isFrozen(1);在ES5中會(huì)報(bào)錯(cuò)，而在ES6中會(huì)返回true.類似的還有Object.isExtensible()和Object.isSealed().

Object.preventExtensions(obj)

Object.preventExtensions() 方法讓一個(gè)對(duì)象變的不可擴(kuò)展，也就是永遠(yuǎn)不能再添加新的屬性

Object.isExtensible(obj)

Object.isExtensible() 方法判斷一個(gè)對(duì)象是否是可擴(kuò)展的（是否可以在它上面添加新的屬性）

Object.seal(obj)

bject.seal() 方法可以讓一個(gè)對(duì)象密封，并返回被密封后的對(duì)象。密封對(duì)象是指那些不能添加新的屬性，不能刪除已有屬性，以及不能修改已有屬性的可枚舉性、可配置性、可寫性，但可能可以修改已有屬性的值的對(duì)象。

Object.isSealed(obj)

Object.isSealed() 方法判斷一個(gè)對(duì)象是否是密封的（sealed）。(密封對(duì)象是指那些不可擴(kuò)展的，且所有自身屬性都不可配置的（non-configurable）對(duì)象。)

Object.getOwnPropertyDescriptor(obj, prop)

Object.getOwnPropertyDescriptor() 返回指定對(duì)象上一個(gè)自有屬性對(duì)應(yīng)的屬性描述符。（自有屬性指的是直接賦予該對(duì)象的屬性，不需要從原型鏈上進(jìn)行查找的屬性）

Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames()方法返回一個(gè)由指定對(duì)象的所有自身屬性的屬性名（包括不可枚舉屬性）組成的數(shù)組。

Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols()[ES6] 方法會(huì)返回一個(gè)數(shù)組，該數(shù)組包含了指定對(duì)象自身的（非繼承的）所有 symbol 屬性鍵。

Object.getPrototypeOf(obj)

Object.getPrototypeOf()方法返回指定對(duì)象的原型。（也就是該對(duì)象內(nèi)部屬性[[prototype]]的值）

Object.observe(obj, callback)

Object.observe()[ES7] 方法用于異步的監(jiān)視一個(gè)對(duì)象的修改。當(dāng)對(duì)象屬性被修改時(shí)，方法的回調(diào)函數(shù)會(huì)提供一個(gè)有序的修改流。Object.observe().該方法在兩個(gè)月之前從提議中去掉了，可以使用第三方庫(kù)代替。

Object.unobserve(obj, callback)

Object.unobserve()[ES7] 是用來(lái)移除通過(guò) Object.observe()設(shè)置的觀察者的方法。

Object.getNotifer(obj)

Object.getNotifer()[ES7]可以創(chuàng)造一個(gè)異步觸發(fā)的對(duì)象。

Object.prototype.toString()

toString() 方法返回一個(gè)代表該對(duì)象的字符串。調(diào)用該對(duì)象的toString()方法時(shí)會(huì)返回"[object type]"，這里的字符串type表示了一個(gè)對(duì)象類型。所以經(jīng)常使用該方法去做類型判斷，因?yàn)槭褂胻ypeof,無(wú)法區(qū)分array, null, function, object等。因?yàn)樵摲椒〞?huì)被子類方法覆蓋，所以需要調(diào)用Object.prototype的toString()。

var toString = Object.prototype.toString;

toString.call(new Function) // [object Function]
toString.call(new Date); // [object Date]
toString.call(new String); // [object String]
toString.call(Math); // [object Math]

//Since JavaScript 1.8.5
toString.call(undefined); // [object Undefined]
toString.call(null); // [object Null]

Object.prototype.toLocaleString();

toLocaleString() 方法返回一個(gè)該對(duì)象的字符串表示。該方法主要用于被本地化相關(guān)對(duì)象覆蓋。

Object.prototype.hasOwnProperty()

hasOwnProperty() 方法用來(lái)判斷某個(gè)對(duì)象是否含有指定的自身屬性。

Object.prototype.isPrototypeOf(obj)

isPrototypeOf() 方法測(cè)試一個(gè)對(duì)象是否存在于另一個(gè)對(duì)象的原型鏈上。

Object.prototype.propertyIsEnumerable(obj)

propertyIsEnumerable() 方法返回一個(gè)布爾值，表明指定的屬性名是否是當(dāng)前對(duì)象可枚舉的自身屬性.

Object.prototype.valueOf(obj)

Object.prototype.valueOf()方法返回特定對(duì)象的初始值。

GPU云服務(wù)器云服務(wù)器 javascript object 重讀服務(wù)器 Object object2015

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/78387.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Alex

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

如何繞過(guò)CDN獲取網(wǎng)站的真實(shí)IP？手把手教你！

閱讀 1976·2021-11-24 10:45
hostarmada：2周年促銷，虛擬機(jī)2折，VPS云服務(wù)器75折，可選新加坡/美國(guó)/悉尼/孟買等9

閱讀 1465·2021-11-18 13:15
怎么找到單位監(jiān)控主機(jī)登陸密碼-監(jiān)控主機(jī)密碼忘記了怎么辦？

閱讀 4553·2021-09-22 15:47
寶塔面板安裝iFileSpace，一鍵搭建專屬的私人網(wǎng)盤系統(tǒng)

閱讀 3934·2021-09-09 11:36
仿寫輪眼修改版

閱讀 2017·2019-08-30 15:44
關(guān)于模塊化、組件化的理解

閱讀 3096·2019-08-29 13:05
清除浮動(dòng)的方法

閱讀 2508·2019-08-29 12:54
造輪子 - EGGJS的MySQL操作庫(kù)

閱讀 2001·2019-08-26 13:47

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

重讀Javascript之Object

相關(guān)文章

**重讀javascript之Function**

**重讀 JavaScript DOM 編程藝術(shù)（一）--DOM 的增刪改查**

**重讀《學(xué)習(xí)JavaScript數(shù)據(jù)結(jié)構(gòu)與算法-第三版》- 第5章隊(duì)列**

**重讀《學(xué)習(xí)JavaScript數(shù)據(jù)結(jié)構(gòu)與算法-第三版》-第2章 ECMAScript與TypeScr**

重讀你不知道的JS (上) 第一節(jié)三章

發(fā)表評(píng)論

0條評(píng)論

Alex

男|高級(jí)講師

TA的文章

如何繞過(guò)CDN獲取網(wǎng)站的真實(shí)IP？手把手教你！

hostarmada：2周年促銷，虛擬機(jī)2折，VPS云服務(wù)器75折，可選新加坡/美國(guó)/悉尼/孟買等9

怎么找到單位監(jiān)控主機(jī)登陸密碼-監(jiān)控主機(jī)密碼忘記了怎么辦？

寶塔面板安裝iFileSpace，一鍵搭建專屬的私人網(wǎng)盤系統(tǒng)

仿寫輪眼修改版

關(guān)于模塊化、組件化的理解

清除浮動(dòng)的方法

造輪子 - EGGJS的MySQL操作庫(kù)

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

重讀Javascript之Object

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！