深入理解 Javascript 之對象

neroneroffy 發布于2019-08-23 10:52 / 2029人閱讀

摘要：返回如下仔細分析下面的圖，將會加深你的理解和我們有一個類對象有一個屬性，其指向構造器的原型是一個類構造器是之后產生的。

擼js基礎之對象 圖例

先談談 ECMAScript 中的數據類型

ES6 之前 ECMAScript 中有 5 種簡單數據類型（也稱為【基本數據類型】）：Undefined、Null、Boolean、Number和 String。

還有一種復雜的【引用數據類型】Object。

ES6引入了一種新的原始數據類型 Symbol，表示獨一無二的值。它是 JavaScript 語言的第七種數據類型。它也是基本數據類型。

特點

基本數據類型的值是按值訪問的
基本類型的值是不可變的
基本類型的比較是它們的值的比較
基本類型的變量是存放在棧內存（Stack）里的

引用類型的值是按引用訪問的
引用類型的值是可變的
引用類型的比較是引用的比較
引用類型的值是保存在堆內存（Heap）中的對象（Object） 與其他編程語言不同，JavaScript 不能直接操作對象的內存空間（堆內存）

圖解：

檢測變量類型

typeof

適合判斷基本數據類型和function的判斷

typeof "sss" ===> "string"
typeof 123 ===> "Number"
typeof [1,2,3] ===> "object"
typeof new Date() ===> "object"
typeof function(){alert("111");}  ===> "function"
typeof undefined ===> "undefined"
typeof NaN ===> "number"
typeof null ===> "object"

instanceof

判斷已知的對象類型或者是自定義的對象

目標對象 + instanceof + 函數構造器[可以理解為是某個對象是否是某個構造器的實例]

原理：判斷左邊的對象的原型鏈上是否有右側的構造函數的prototype屬性

[1,3] instanceof Array === true
new Array("1, 3,4") instanceof Array === true
new Object() instanceof Object === true
new String("string") instanceof String === true
function(){this.name="22";} instanceof Function === true

// 定義一個構造函數
function Person(){
    
}
// 定義一個構造函數
function Student(){

}
// 每一個構造函數都有一個prototype對象屬性， 這個對象屬性將會作為通過new Person()創建的對象的一個原型。
// 也就是當我們在new 一個對象的時候，這個對象的原型就指向了這個構造函數的prototype。

Student.prototype = new Person(); // student繼承至person

var bson = new Student();
bson instanceof Student
// false

bson instanceof Person
// true

Object.prototype.toString.apply()

判斷基本數據類型和內置對象

Object.prototype.toString.apply([]) === "[object Array]"
Object.prototype.toString.apply(function(){}) === "[object Function]"

Object.prototype.toString.apply(new Function); // "[object Function]"
Object.prototype.toString.apply(new Object);       // "[object Object]"
Object.prototype.toString.apply(new Date);         // "[object Date]"
Object.prototype.toString.apply(new Array);        // "[object Array]"
Object.prototype.toString.apply(new RegExp);       // "[object RegExp]"
Object.prototype.toString.apply(new ArrayBuffer);  // "[object ArrayBuffer]"
Object.prototype.toString.apply(Math);             // "[object Math]"
Object.prototype.toString.apply(JSON);             // "[object JSON]"
var promise = new Promise(function(resolve, reject) {
    resolve();
});
Object.prototype.toString.apply(promise);          // "[object Promise]"
Object.prototype.toString.apply(124)
// "[object Number]"
Object.prototype.toString.apply("222")
// "[object String]"
Object.prototype.toString.apply(true)
// "[object Boolean]"
Object.prototype.toString.apply(null)
// "[object Null]"
Object.prototype.toString.apply(null) === "[object Null]"   // 在IE6/7/8下存在有兼容性問題

創建對象

使用 Object 構造函數創建

// 對象實例的創建
var obj = new Object() 
obj.key = "value"   //使用構造函數創建一個空對象，并賦值

使用對象字面量表示法創建

//使用字面量創建一個對象
var obj = {
    key1: "value1",
    key2: "value2"
}

ES6中還有更簡潔的

var age = 20
var sex = "sexy"
 
var a = {
    name: "jack",
 
    // 簡潔表示法，等同于 age: age
    age, 
 
    // 簡潔表示法，等同于 sayName: function() {}
    sayName(){}, 
 
    // 屬性名表達式，等同于 lover: "rose"
    ["lo" + "ver"]: "rose", 
 
    // 屬性名表達式，等同于 sexy: "male"
    [sex]: "male"
}

工廠模式[創建多個相似的對象]

var createPerson (name, age){
    var o = {};
    o.name = name;
    o.age = age;
    o.sayName = function(){
        console.log(this);
    }
    return o;
}

var a = createPerson ("zjj", 20);
var b = createPerson ("zmf", 30);

工廠模式雖然解決多創建多個相似對象的問題，但卻沒有解決對象識別的問題（即怎樣知道一個對象的類型）。

模仿“類”的設計

構造函數模式

function Person (name, age) {
    this.name = name;
    thia.age = age;
    this.sayName = function() { alert(this.age) }
}
Person.prototype.count = 2;
var a = new Person("a", 20)
var b = new Person("b", 22)
 
a instanceof Person // true

構造函數與其他函數唯一的區別就在于調用他們的方式不同。任何函數只要通過new 操作符來調用，那它就可以作為構造函數。

使用new操作符調用函數

function CO(){  
    this.p = “I’m in constructed object”;  
    this.alertP = function(){  
        alert(this.p);  
    }  
}  

var o2 = new CO();  


var obj = {}; // 第一步創建一個空對象
obj.__proto__ = CO.prototype; // 該對象的原型鏈指向構造函數的 prototype 所指向的對象。
CO.call(obj); // 第三步，將構造函數的作用域賦值給新的對象
return obj; // 返回新的對象

自定義一個new()

function Person(name, age) {
  this.name = name;
  this.age = age;
}

function New(f) {

  return function() {
    var o = {"__proto__": f.prototype}
    f.apply(o, arguments);
    return o;
  }
}

上面這種構造函數解決了對象類型識別的問題，但是每個方法都要在每個實例上重新創建一遍，在上面的例子中，a 和 b 都有個名為sayName()的方法，這兩個方法雖然名字、內容、功能相同，但卻分別在 a 和 b 中都重新創建了一次，這是沒有必要的。

更好的方法應該是將公用的方法放到他們的原型上，也就是接下來要說的原型模式。

原型模式

所有函數都有一個不可枚舉的 prototype（原型）屬性，這個屬性是一個指針，指向一個對象。

Person.prototype

返回如下：

仔細分析下面的圖，將會加深你的理解

prototype 和 proto

我們有一個person類

function Person (name, age) {
    this.name = name;
    thia.age = age;
    this.sayName = function() { alert(this.age) }
}
Person.prototype.count = 2;
var p = new Person("zjj", 10);

對象p有一個__proto__屬性，其指向構造器的原型

p.__proto__ == Person.prototype

foo 是一個類（構造器）
fooObj是new foo() 之后產生的。
fooObj的 __proto__ 指向構造器原型（foo.prototype）
foo 通過prototype 指向 構造器原型（foo.prototype）
構造器原型（foo.prototype）的構造器屬性constructor 指向 foo

Person.__proto__ === Function.prototype

__proto__究竟指向誰

原型鏈

由于Person.prototype.__proto__ === Object.prototype，這就

相信看了上面兩幅圖，大家一定對原型鏈有了更深的理解和認識了吧！！

GPU云服務器云服務器深入理解webrtc之aec 深入理解javascript 深入理解系列深入理解linux

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/96762.html

【進階1-2期】JavaScript深入之執行上下文棧和變量對象

摘要：本計劃一共期，每期重點攻克一個面試重難點，如果你還不了解本進階計劃，點擊查看前端進階的破冰之旅本期推薦文章深入之執行上下文棧和深入之變量對象，由于微信不能訪問外鏈，點擊閱讀原文就可以啦。（關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）本周正式開始前端進階的第一期，本周的主題是調用堆棧，今天是第二天。本計劃一共28期，每期...

Richard_Gao 2019-08-23 13:46 評論0 收藏0
JavaScript深入之參數按值傳遞

摘要：深入系列第九篇，除了按值傳遞引用傳遞，還有第三種傳遞方式按共享傳遞定義在高級程序設計第三版，講到傳遞參數中所有函數的參數都是按值傳遞的。 JavaScript深入系列第九篇，除了按值傳遞、引用傳遞，還有第三種傳遞方式 —— 按共享傳遞定義在《JavaScript高級程序設計》第三版 4.1.3，講到傳遞參數： ECMAScript中所有函數的參數都是按值傳遞的。什么是按值傳遞呢？...

DataPipeline 2019-08-20 16:08 評論0 收藏0
深入理解JavaScript系列9:S.O.L.I.D五大原則之接口隔離原則

摘要：前言本章我們要講解的是五大原則語言實現的第篇，接口隔離原則。接口隔離原則和單一職責有點類似，都是用于聚集功能職責的，實際上可以被理解才具有單一職責的程序轉化到一個具有公共接口的對象。與我們下面討論的一些小節是里關于違反接口隔離原則的影響。前言本章我們要講解的是S.O.L.I.D五大原則JavaScript語言實現的第4篇，接口隔離原則ISP（The Interface Segreg...

piglei 2019-08-19 17:22 評論0 收藏0
【進階2-3期】JavaScript深入之閉包面試題解

摘要：閉包面試題解由于作用域鏈機制的影響，閉包只能取得內部函數的最后一個值，這引起的一個副作用就是如果內部函數在一個循環中，那么變量的值始終為最后一個值。（關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）本周正式開始前端進階的第二期，本周的主題是作用域閉包，今天是第8天。本計劃一共28期，每期重點攻克一個面試重難點，如果你還不了...

alanoddsoff 2019-08-23 13:47 評論0 收藏0
【進階2-2期】JavaScript深入之從作用域鏈理解閉包

摘要：使用上一篇文章的例子來說明下自由變量進階期深入淺出圖解作用域鏈和閉包訪問外部的今天是今天是其中既不是參數，也不是局部變量，所以是自由變量。（關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）本周正式開始前端進階的第二期，本周的主題是作用域閉包，今天是第7天。本計劃一共28期，每期重點攻克一個面試重難點，如果你還不了解本進階計...

simpleapples 2019-08-23 13:47 評論0 收藏0
【進階1-3期】JavaScript深入之內存空間詳細圖解

摘要：進階期理解中的執行上下文和執行棧進階期深入之執行上下文棧和變量對象但是今天補充一個知識點某些情況下，調用堆棧中函數調用的數量超出了調用堆棧的實際大小，瀏覽器會拋出一個錯誤終止運行。（關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）本周正式開始前端進階的第一期，本周的主題是調用堆棧，今天是第3天。本計劃一共28期，每期重點攻...

coordinate35 2019-08-23 13:47 評論0 收藏0