【重溫基礎】15.JS對象介紹

時間 2019-11-21

原文原文鏈接

從這篇文章開始，複習 MDN 中級教程的內容了，在初級教程中，我和你們分享了一些比較簡單基礎的知識點，並放在個人【Cute-JavaScript】系列文章中。 javascript

關於【Cute-JavaScript】：
一本可愛的JavaScript小書，內容分紅三大部分：ES規範系列、JS基礎系列和面試題系列，目前我還在抓緊更新，喜歡的朋友能夠 github 上Star一下呀，下面放一張首頁圖：
前端

正文開始 java

本文是 重溫基礎 系列文章的第十五篇。
今日感覺：耐心爲人處世。 git

本章節複習的是JS中的關於對象還有原型等相關知識。 github

前置知識：
關於使用對象，能夠先閱讀一下個人《12.使用對象》這篇文章。面試

下面也先重溫一點基礎。正則表達式

1.概念

對象是一個包含相關數據和方法的集合，由變量和方法組成，一般稱爲對象的屬性和方法，好比：chrome

let me = {
    name : 'pingan',
    eat: function(){
        console.log('eat eat eat!!!');
    }
}

其中，name就是me這個對象的一個屬性，eat就是me這個對象的一個方法。
訪問對象的屬性是這樣的：編程

me.name;   // "pingan"
me.eat();  // "eat eat eat!!!"

另外在訪問對象屬性時，有如下兩種方式：segmentfault

let me = {
    name : 'pingan',
}
// 點表示法
me.name;   // me.name => "pingan"

// 括號表示法
me["name"];// me.name => "pingan"

括號表示法中，必須是字符串。

咱們經常這麼設置對象的屬性：

let me = {
    name : 'pingan',
}
// 點表示法
me.name = "leo";   // me => {name: "leo"}

// 括號表示法
me["name"] = "leo";// me => {name: "leo"}

2.簡單的面向對象介紹

這裏簡單介紹下JavaScrip的面向對象編程OOP。

面向對象編程（Object Oriented Programming，OOP，面向對象程序設計）是一種計算機編程架構。OOP 的一條基本原則是計算機程序是由單個可以起到子程序做用的單元或對象組合而成。 —— 百度百科

咱們這裏定義一個簡單的對象模型，好比我，個人身上可能有不少信息（姓名，年齡，身高等等），這時候咱們能夠將這些信息抽取出來，像這樣：

let leo = {
    name : 'leo',
    age  : 26,
    height : 180,
}

這樣咱們就將個人信息抽取成一個JS的對象了，可是這樣有個侷限性，這樣定義的話，一次只能定義一我的，若是這時候，有一百我的，那麼咱們就須要定義一百個這樣的對象，顯然這是不可取的。
因此，這裏就引入一個重要的函數——構造函數，將相同的特性封裝成通用的對象，實現定義一次，其餘地方均可以使用，這也是OOP的核心思想：

// 傳入 name 參數使得能夠定義任何人做爲對象
function Person (name){
    let me = {};
    me.name = name;
    me.doSomething = function(){
        console.log(me.name);
    }
    return me;
}

建立一個函數「Person」，只要傳入不一樣的name便可獲得不一樣的對象：

let leo = Person("leo");
leo.name;    // "leo"

let pingan = Person("pingan");
pingan.name; // "pingan"

可是彷佛Person對象的定義，顯得不夠精簡，由於還要定義一個空對象來接收各個屬性和方法，幸虧JavaScrip在構造函數中提供一個便捷的方法，咱們將代碼改造下：

function Person (name){
    this.name = name;
    this.doSomething = function(){
        console.log(this.name);
    }
}

對於this關鍵詞，即不管是該對象的哪一個實例被構造函數建立，它的name屬性都是參數name的值，doSomething方法中使用的也是參數name。簡單理解就是用this指代了Person。

構造函數一般首字母大寫，用於區分普通函數。

接下來，經過new關鍵詞，使用前面建立的構造函數（使用構造函數也叫實例化）：

let leo = new Person("leo");
leo.name;    // "leo"

let pingan = new Person("pingan");
pingan.name; // "pingan"

而後一個簡單的構造函數就寫好了，一般在開發的時候，可能會有不少的參數：

function Man(name, age, height, weight){
    this.name = name;
    this.age = age + '歲';
    this.HeightAndWeight = {
        height,
        weight
    };
    this.doSomething = function (){
        console.log(`
            ${this.name}: height:${this.HeightAndWeight.height}m, 
            weight:${this.HeightAndWeight.weight}Kg!!`
        );
    };
}

let leo = new Man("leo",25,1.8,68);
leo.doSomething();  // leo: height:1.8m, weight:68Kg!!

3.JS中的原型

3.1理解原型

這裏須要先了解一下Object和Function,這兩個函數都是JS的自帶函數，Object繼承本身，Function繼承本身，相互繼承對方，即Object和Function既是函數也是對象。

console.log(Function instanceof Object); // true
console.log(Object instanceof Function); // true

Object 是 Function的實例，而Function是它本身的實例。

console.log(Function.prototype); // ƒ () { [native code] }
console.log(Object.prototype);  // Object

另外，只有經過Function建立的函數都是函數對象，其餘都是普通對象（一般由Object建立）：

function f1(){};
typeof f1 //"function"
 
 
var o1 = new f1();
typeof o1 //"object"
 
var o2 = {};
typeof o2 //"object"

理論知識：

JavaScript 常被描述爲一種基於原型的語言 (prototype-based language)——每一個對象擁有一個原型對象，對象以其原型爲模板、從原型繼承方法和屬性。
原型對象也可能擁有原型，並從中繼承方法和屬性，一層一層、以此類推。這種關係常被稱爲原型鏈 (prototype chain)，它解釋了爲什麼一個對象會擁有定義在其餘對象中的屬性和方法。
準確地說，這些屬性和方法定義在Object的構造器函數(constructor functions)之上的prototype屬性上，而非對象實例自己。

我的理解：

JS中全部的函數對象，都有一個prototype屬性，對應當前對象的原型，但普通對象沒有，而prototype屬性下還有一個constructor，指向這個函數。

var p = {};
p.prototype;         // undefined
p instanceof Object; // true

function f (){}; 
f.prototype;         // object {constructor: ƒ}
f === f.prototype.constructor;           // true
Object === Object.prototype.constructor; // true

JS中全部的對象，都有一個_proto_屬性，指向實例對象的構造函數原型（因爲_proto_是個非標準屬性，所以只有ff和chrome兩個瀏覽器支持，標準方法是Object.getPrototypeOf()）。

var p = new Person(); 
p._proto === Person.prototype;  //true

修改原型：
常常咱們也須要對原型進行修改：

function Person (name){
    this.name = name;
}
// 添加一個getName方法
Person.prototype.getName = function(){
    return "名字：" + this.name;
}
var p = new Person("leo"); 
p.getName();   // "名字：leo"

這裏也說明了原型進行繼承，p繼承Person原型中新增的函數屬性getName。

3.2原型鏈

概念：
javascript中，每一個對象都會在內部生成一個 proto 屬性，當咱們訪問一個對象屬性時，若是這個對象不存在就會去 proto 指向的對象裏面找，一層一層找下去，直到找到爲止，若是到了原型鏈頂端，還沒找到，則返回undefined，這就是javascript原型鏈的概念。