JavaScript之 new 命令

desdik 發布于2019-05-23 11:57 / 2199人閱讀

摘要：命令執行時，構造函數內部的，就代表了新生成的實例對象，表示實例對象有一個屬性，值是。因此，應該非常小心，避免不使用命令直接調用構造函數。命令返回這個對象，而不是對象。

JavaScript 面向對象編程的基礎知識篇 1 。

1. 概述

面向對象編程（Object Oriented Programming，縮寫為 OOP）是目前主流的編程范式。

那么，“對象”（object）到底是什么？

對象是單個實物的抽象。

對象是一個容器，封裝了屬性（property）和方法（method）。屬性是對象的狀態，方法是對象的行為（完成某種任務）。

2. 構造函數

面向對象編程的第一步，就是要生成對象。通常需要一個模板，表示某一類實物的共同特征，然后對象根據這個模板生成。

JavaScript 語言使用構造函數（constructor）作為對象的模板。 “構造函數”，就是專門用來生成實例對象的函數。

它就是對象的模板，描述實例對象的基本結構。一個構造函數，可以生成多個實例對象，這些實例對象都有相同的結構。

var Vehicle = function () {
  this.price = 1000;
};

上面代碼中，Vehicle 就是構造函數。為了與普通函數區別，構造函數名字的第一個字母通常大寫。

構造函數的特點有兩個。

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

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

3. new 命令

3.1 基本用法

3.1.1 new 的基本用法

new 命令的作用，就是執行構造函數，返回一個實例對象。

var Vehicle = function () {
  this.price = 1000;
};

var v = new Vehicle();
v.price // 1000

上面代碼通過 new 命令，讓構造函數 Vehicle 生成一個實例對象，保存在變量 v 中。new 命令執行時，構造函數內部的this，就代表了新生成的實例對象，this.price 表示實例對象有一個 price 屬性，值是1000。

下面兩行代碼是等價的，但是為了表示這里是函數調用，推薦使用括號。

// 推薦的寫法
var v = new Vehicle();
// 不推薦的寫法
var v = new Vehicle;

3.1.2 保證構造函數必須與 new 命令一起使用

如果忘了使用 new 命令，直接調用構造函數會發生什么事？

var Vehicle = function (){
  this.price = 1000;
};

var v = Vehicle();
v // undefined
price // 1000

上面代碼中，調用 Vehicle 構造函數時，忘了加上 new 命令。結果，變量 v 變成了 undefined，而 price 屬性變成了全局變量。因此，應該非常小心，避免不使用 new 命令、直接調用構造函數。

為了保證構造函數必須與 new 命令一起使用，有2種解決辦法：

構造函數內部使用嚴格模式，即第一行加上 use strict。這樣的話，一旦忘了使用 new 命令，直接調用構造函數就會報錯。

function Fubar(foo, bar){
  "use strict";
  this._foo = foo;
  this._bar = bar;
}

Fubar()
// TypeError: Cannot set property "_foo" of undefined

上面代碼的 Fubar 為構造函數，use strict 命令保證了該函數在嚴格模式下運行。由于嚴格模式中，函數內部的 this 不能指向全局對象，默認等于undefined，導致不加 new 調用會報錯（JavaScript 不允許對 undefined添加屬性）。

構造函數內部判斷是否使用 new 命令，如果發現沒有使用，則直接返回一個實例對象。

function Fubar(foo, bar) {
  if (!(this instanceof Fubar)) {
    return new Fubar(foo, bar);
  }

  this._foo = foo;
  this._bar = bar;
}

Fubar(1, 2)._foo // 1
(new Fubar(1, 2))._foo // 1

3.2 new 命令的原理

使用 new 命令時，它后面的函數依次執行下面的步驟。

創建一個空對象，作為將要返回的對象實例。

將這個空對象的原型，指向構造函數的 prototype 屬性。

將這個空對象賦值給函數內部的 this 關鍵字。

開始執行構造函數內部的代碼。

也就是說，構造函數內部，this 指的是一個新生成的空對象，所有針對 this 的操作，都會發生在這個空對象上。構造函數之所以叫“構造函數”，就是說這個函數的目的，就是操作一個空對象（即this對象），將其“構造”為需要的樣子。

3.2.1 關于 return語句

如果構造函數內部有 return 語句，而且 return 后面跟著一個對象，new 命令會返回return 語句指定的對象；否則，就會不管return語句，返回 this 對象。

var Vehicle = function () {
  this.price = 1000;
  return 1000;
};

(new Vehicle()) === 1000
// false    new命令忽略了這個 return 語句，返回“構造”后的 this 對象。

如果 return語句返回的是一個跟 this 無關的新對象，new命令會返回這個新對象，而不是this對象。

var Vehicle = function (){
  this.price = 1000;
  return { price: 2000 };
};

(new Vehicle()).price
// 2000   new 命令返回這個對象，而不是 this 對象。

3.2.2 對普通函數使用 new

如果對普通函數（內部沒有 this 關鍵字的函數）使用 new 命令，則會返回一個空對象。

function getMessage() {
  return "this is a message";
}

var msg = new getMessage();

msg // {}
typeof msg // "object"

這是因為 new 命令總是返回一個對象，要么是實例對象，要么是return 語句指定的對象。本例中，return 語句返回的是字符串，所以new 命令就忽略了該語句。

參考鏈接

阮一峰, JavaScript 教程

GPU云服務器云服務器 new 命令 new命令 javascript命令 javascript命令模式

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

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

溫故知新之javascript面向對象

摘要：應該非常小心，避免出現不使用命令直接調用構造函數的情況。上面代碼表示，使用屬性，確定實例對象的構造函數是，而不是。當然，從繼承鏈來看，只有一個父類，但是由于在的實例上，同時執行和的構造函數，所以它同時繼承了這兩個類的方法。基本概念類和實例是大多數面向對象編程語言的基本概念類：類是對象的類型模板實例：實例是根據類創建的對象但是，JavaScript語言的對象體系，不是基于類的，...

趙連江 2019-08-22 12:45 評論0 收藏0
再遇設計模式之JavaScript篇

摘要：在面向對象的語言中，比如，等，單例模式通常是定義類時將構造函數設為，保證對象不能在外部被出來，同時給類定義一個靜態的方法，用來獲取或者創建這個唯一的實例。萬事開頭難，作為正經歷菜鳥賽季的前端player，已經忘記第一次告訴自己要寫一些東西出來是多久以的事情了。。。如果，你也和我一樣，那就像我一樣，從現在開始，從看到這篇文章開始，打開電腦，敲下你的第一篇文章（或者任何形式的文字）吧。 ...

Clect 2019-08-20 19:09 評論0 收藏0
細談JavaScript中的一些設計模式

摘要：注意事項聲明函數時候處理業務邏輯區分和單例的區別，配合單例實現初始化構造函數大寫字母開頭推薦注意的成本。簡單工廠模式使用一個類通常為單體來生成實例。 @(書籍閱讀)[JavaScript, 設計模式] 常見設計模式一直對設計模式不太懂，花了一下午加一晚上的時間，好好的看了看各種設計模式，并總結了一下。設計模式簡介設計模式概念解讀設計模式的發展與在JavaScript中的應用 ...

30e8336b8229 2019-08-19 17:47 評論0 收藏0
JS之原型與原型鏈

摘要：因此，就會形成一個原型鏈對象到原型，再到原型的原型如果一層層地上溯，所有對象的原型最終都可以上溯到，即構造函數的屬性。對于很多前端開發者而言，JavaScript中原型與原型鏈是一個比較容易疑惑的點，所以本文記錄了自己對應這方面的一點理解，以后有更深的理解再來更新。對象想要了解原型與原型鏈，首先要了解什么是對象？面向對象編程（Object Oriented Programmin...

Fourierr 2019-08-23 12:56 評論0 收藏0
在 Laravel 項目中使用 Glup 之 Laravel-Elixir

摘要：結果會被存放到拷貝文件目錄你可以使用方法拷貝文件目錄到新路徑，所有操作都相對于項目根目錄版本號緩存刷新很多開發者會給編譯的前端資源添加時間戳或者唯一令牌后綴以強制瀏覽器加載最新版本而不是代碼的緩存副本。環境準備 1、安裝 nodejs 和 npm ?如果你使用的是 Laravel 的 Homestead 環境，可以不用安裝了，已自帶。 ?我們來查看下它們的版本： $ node -v ...

ralap 2019-06-27 12:13 評論0 收藏0