javascript 面向對象 new 關鍵字原型鏈構造函數

wfc_666 發布于2019-08-23 15:10 / 1096人閱讀

摘要：面向對象語言使用構造函數作為對象的模板。報錯關鍵字命令內部實現接受個數不確定參數，第一個參數構造函數第二個到第個參數構造函數傳遞的參數。等價于獲取構造函數返回數組第一個元素使用構造函數原型創建一個對象。

JavaScript面向對象
JavaScript 語言使用構造函數（constructor）作為對象的模板。所謂”構造函數”，就是專門用來生成實例對象的函數。它就是對象的模板，描述實例對象的基本結構。一個構造函數，可以生成多個實例對象，這些實例對象都有相同的結構

構造函數的首字母大寫，區分一般函數。

函數體內部使用了this關鍵字，代表了所要生成的對象實例。

生成對象的時候，必須使用new命令。

構造函數內部使用嚴格模式 "use strict"，防止當做一般函數調用，這樣就會報錯。

function Person(name, age, sex) {
    "use strict";
    this.name = name;
    this.age = age;
    this.sex = sex;
}

Person() 報錯
new Person("zhangxc", 29, "male");

1、new關鍵字命令內部實現

function _new(constructor, params) { // 接受個數不確定參數，第一個參數：構造函數；第二個到第n個參數：構造函數傳遞的參數。
    // 1. 首先將參數組成一個數組 
    // 首先 .slice 這個方法在不接受任何參數的時候會返回 this 本身，這是一個 Array.prototype 下的方法，因此 this 就是指向調用 .slice 方法的數組本身。
    var args = Array.prototype.slice.call(arguments); // arguments偽數組，獲取函數的所有參數的偽數組。
    // 等價于
    // [].slice.call(arguments);
    // 2. 獲取構造函數
    var constructor = args.shift(); // shift()返回數組第一個元素
    // 3. 使用構造函數原型創建一個對象。我們希望以這個現有的對象作為模板，生成新的實例對象，這時就可以使用Object.create()方法。
    var context = Object.create(constructor.prototype); // Object.create()參數是一個對象，新建的對象繼承參數對象的所有屬性
    // 4. 將參數屬性附加到對象上面
    var result = constructor.apply(context, args);
    // 5. 返回一個對象
    return (typeof result === "object" && result != null) ? result : context;
}

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

var args1 = _new(Person, "zhangxc", 18, "male");

// {name: "zhangxc", age: 18, sex: "male"}

var args2 = new Person("zhangxc", 18, "male");

// {name: "zhangxc", age: 18, sex: "male"}

new.target屬性

如果當前函數是new命令調用，new.target指向當前函數(構造函數的名稱)，否則為undefined。

function Test() {
  console.log(new.target === Test);
}

Test() // false
new Test() // true

2、this關鍵字
this總是指向調用該方法的對象，在最外面調用就指向window
bind, call, apply都可以改變this的指向

var name = "window";
var obj = {
    name: "object"
}
function fun() {
    console.log(this.name);
}

1、直接調用 fun() // window 
因為此時fun() this指向window對象

2、fun.call(obj);    // "object" 
call改變了this的指向，此時this指向obj對象，this.name 在obj對象里面取值，而不是window對象了。

詳細講解連接：https://github.com/mqyqingfen...

3、對象的繼承
JavaScript 語言的繼承不通過 class，而是通過“原型對象”（prototype）實現。

prototype原型對象

每一個函數都有一個原型對象

每一個實例對象都有一個 __proto__屬性

JavaScript 繼承機制的設計思想就是，原型對象的所有屬性和方法，都能被實例對象共享。也就是說，如果屬性和方法定義在原型上，那么所有實例對象就能共享，不僅節省了內存，還體現了實例對象之間的聯系。原型對象的作用，就是定義所有實例對象共享的屬性和方法。這也是它被稱為原型對象的原因，而實例對象可以視作從原型對象衍生出來的子對象。

// 定義水果構造函數
function Fruit(name, color) {
    this.name = name;
    this.color = color;
}

// 實例化apple對象
var apple = new Fruit("apple", "red");

// 實例化banana 對象
var banana = new Fruit("banana", "yellow");

// 如果他們有共同的屬性和方法那么就使用 prototype
// 修改 Fruit構造函數
Fruit.prototype.address = "china";
Fruit.prototype.eat = function() {
    console.log(this.name + "-----" + this.color);
}

apple.addess // china
banana.address // china

apple.eat()  // apple ---- red
banana.eat() // banana ---- yellow


function M1() {
  this.hello = "hello";
}

function M2() {
  this.world = "world";
}

**// 1、繼承M1，M2自己的屬性和方法(hasOwnProperty)**
function S() {
  M1.call(this);
  M2.call(this);
}

**// 2、繼承M1原型鏈上的屬性和方法**
S.prototype = Object.create(M1.prototype);
**// 3、繼承M2原型鏈上的屬性和方法**
Object.assign(S.prototype, M2.prototype);

// 指定構造函數
S.prototype.constructor = S;

var s = new S();
s.hello // "hello"
s.world // "world"

4、原型鏈
最透徹的原型鏈講解哈哈

**1. 每一個函數都有prototype屬性指向他的原型對象**
**2. 每一個對象都有__proto__屬性指向他的原型對象**

然后以Date()時間構造函數為例講解
證明：

var data = new Date();
因為：
data是一個實例對象所以他有__proto__屬性指向他的原型對象
Date是一個構造函數所以他有prototype屬性指向他的原型對象
所以：Date.prototype == data.__proto__    // Date{} true
data.__proto__是一個對象
因為：javascript規定所有對象都有原型
所以： data.__proto__.__proto__  == Object.prototype // true
這就是原型鏈了 data.__proto__.__proto__
data對象繼承了 Date Object 原型對象的屬性和方法。

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

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

面向對象的 JavaScript

摘要：是完全的面向對象語言，它們通過類的形式組織函數和變量，使之不能脫離對象存在。而在基于原型的面向對象方式中，對象則是依靠構造器利用原型構造出來的。 JavaScript 函數式腳本語言特性以及其看似隨意的編寫風格，導致長期以來人們對這一門語言的誤解，即認為 JavaScript 不是一門面向對象的語言，或者只是部分具備一些面向對象的特征。本文將回歸面向對象本意，從對語言感悟的角度闡述為什...

novo 2019-08-21 10:49 評論0 收藏0
面向對象的小九九

摘要：由構造函數返回的對象就是表達式的結果。如果構造函數沒有顯式返回一個對象，則使用步驟創建的對象。運算符返回一個布爾值，表示對象是否為某個構造函數的實例。面向對象本人能力有限，有誤請斧正本文旨在復習面向對象(不包含es6) 本文學習思維創建對象的方式，獲取對象屬性構造函數,構造函數的new 做了什么原型與原型對象原型鏈繼承(借用構造繼承、原型繼承、組合繼承、寄生組合繼承)...

時飛 2019-08-22 18:16 評論0 收藏0
Javascript面向對象編程

摘要：如果要理解基于原型實現面向對象的思想，那么理解中得三個重要概念構造函數原型原型鏈對幫助理解基于原型的面向對象思想就顯得尤為重要。函數對象的原型在中，函數是一種特殊的對象，所有的函數都是構造函數的實例。介紹和java這種基于類（class-base）的面向對象的編程語言不同，javascript沒有類這樣的概念，但是javascript也是面向對象的語言，這種面向對象的方式成為基...

wanglu1209 2019-08-21 10:32 評論0 收藏0
JS面向對象二:this/原型鏈/new原理

摘要：情況沒有明確作用對象的情況下，通常為全局對象例如函數的回調函數，它的就是全局對象。正因如此，機器可以作為這類對象的標志，即面向對象語言中類的概念。所以機器又被稱為構造函數。原型鏈也就是繼承鏈。 JS面向對象二:this/原型鏈/new原理阮一峰JavaScript教程:面向對象編程阮一峰JavaScript教程:實例對象與 new 命令阮一峰JavaScript教程:this 關...

anRui 2019-08-26 12:17 評論0 收藏0
JS對象(1)重新認識面向對象

摘要：對象重新認識面向對象面向對象從設計模式上看，對象是計算機抽象現實世界的一種方式。除了字面式聲明方式之外，允許通過構造器創建對象。每個構造器實際上是一個函數對象該函數對象含有一個屬性用于實現基于原型的繼承和共享屬性。 title: JS對象(1)重新認識面向對象 date: 2016-10-05 tags: JavaScript 0x00 面向對象從設計模式上看，對象是...

superw 2019-08-21 11:17 評論0 收藏0