[Effective JavaScript 筆記]第33條:使構造函數與new操作符無關

来源:http://www.cnblogs.com/wengxuesong/archive/2016/06/14/5583089.html
-Advertisement-
Play Games

構造函數覆蓋模式,使用new操作符調用該函數的行為就如以函數調用它的行為一樣。這能工作完全利益於js允許new表達式的結果可以被構造函數中的顯式return語句所覆蓋。當User函數返回self對象時,new表達式的結果就變為self對象。該self對象可能是另一個綁定到this的對象。 防範誤用構... ...


當使用函數作為一個構造函數時,程式依賴於調用者是否記得使用new操作符來調用該構造函數。註意:該函數假設接收者是一個全新的對象。

一個例子

function User(name,pwd){
  this.name=name;
  this.pwd=pwd;
}

當調用者,忘記使用new關鍵字時,那麼這個函數的接收者是全局對象。

var u=User('wengxuesong','asdfasdfadf');
u;//undefinedthis.name;//'wengxuesong'this.pwd;//'asdfasdfadf'

該函數返回了無意義的undefined,還會修改全局對象。
如果將User函數應用ES5的嚴格模式,那麼它的接收者為undefined

function User(name,pwd){
  'use strict';
  this.name=name;
  this.pwd=pwd;
}
var u=User('wengxuesong','asdfasdfadf');//error:this is undefined

上面代碼會報錯,因為在嚴格模式下直接運行的函數中的this是undefined,無法給undefined定義屬性。
如何才能使User函數在不使用new操作符的情況下,還是按預期工作呢?提供一個不管怎樣調用都工作如構造函數的函數。實現該函數的一個簡單方法是檢查函數的接收者是否是正確的User實例

function User(name,pwd){
  if(!(this instanceof User)){
     return new User(name,pwd);//額外的函數調用 
  }
  this.name=name;
  this.pwd=pwd;
}

使用這種方式無論如何調用User函數,都會返回一個繼承自User.prototype的對象

var x=User('wengxuesong','12123123');
var y=new User('songqiang','sfasdfasdf');
x instanceof User;//true
y instanceof User;//true

這個模式的一個缺點是它需要額外的函數調用,因此代價有點高。而且,很難適用於可變參數函數,因為沒有一種直接模擬apply方法將可變參數函數作為構造函數調用的方式。

function User(name,pwd){
  var self=this instanceof User?this:Object.create(User.prototype);
  self.name=name;
  self.pwd=pwd;
  return self;
}

Object.create需要一個原型對象作為參數,並返回一個繼承自該原型對象的新對象。因此,當以函數的方式調用該版本的User函數時,結果將返回一個繼承自User.prototype對象的新對象,並且該對象具有已經初始化的name和pwd屬性。
Object.create只有在ES5環境中才是有效的,可以通過代碼進行相容。上節已經寫過一次了,再寫一遍加深印象吧。

if(typeof Object.create === 'undefined'){
    Object.create=function(prototype){
       function F(){};
       F.prototype=prototype;
       return new F();
    }
}

註意:這裡只實現了單參數的Object.create函數。真實版本的Object.create函數還接受一個可選的參數,該參數描述了一組定義在新對象上的屬性描述符。

如果使用new操作符調用新版本的User參數會發生什麼?

構造函數覆蓋模式,使用new操作符調用該函數的行為就如以函數調用它的行為一樣。這能工作完全利益於js允許new表達式的結果可以被構造函數中的顯式return語句所覆蓋。當User函數返回self對象時,new表達式的結果就變為self對象。該self對象可能是另一個綁定到this的對象。
防範誤用構造函數可能並不是太值得去做,尤其是當僅僅是局部使用構造函數時。但是理解如果以錯誤的方式調用構造函數會造成嚴重後果很重要。至少文檔化構造函數期望使用new操作符調用是很重要的,尤其是在跨大型代碼庫中其享構造函數或該構造函數來自一個共用庫時。

提示

  • 通過使用new操作符或Object.create方法在構造函數定義中調用自身使得該構造函數與調用語法無關

  • 當一個函數期望使用new操作符調用時,清晰地文檔化該函數

附錄一:Object.create方法

以下內容來自Mozilla 開發者社區
Object.create()方法創建一個擁有指定原型和若幹指定屬性的對象。

語法

Object.create(原型對象,[屬性對象集])

異常

如果原型對象不是null或一個對象值,則拋出一個TypeError異常

實現類式繼承

單繼承
function Shape(){
  this.x=0;
  this.y=0;
}
Shape.prototype.move=function(x,y){
  this.x+=x;
  this.y+=y;
  console.info('Shape moved.');
};

function Rectangle(){
  Shape.call(this);//構造函數借用
}
Rectangle.prototype=Object.create(Shape.prototype);

var rect=new Rectangle();
rect instanceof Rectangle;//true
rect instanceof Shape;//true
rect.move(1,1);//"Shape moved"

畫張圖表示一下上面的關係
1465870265977

多繼承
function MyClass(){
  SuperClass.call(this);
  OtherSuperClass.call(this);
}
MyClass.prototype=Object.create(SuperClass.prototype);
mixin(MyClass.prototype,OtherSuperClass.prototype);//mixin
MyClass.prototype.myMethod=function(){
  
};
propertyObject參數
var o;
//創建原型為null的空對象
o=Object.create(null);

o={};
//以字面量方式創建空對象相當於下麵這句代碼
o=Object.create(Object.prototype)


o=Object.create(Object.prototype,{
  //創建對象的數據屬性
  foo:{writable:true,configurable:true,value:'hello'},
  //創建對象的訪問器屬性
  bar:{
     configurable:false,
     get:function(){return 10;},
     set:function(val){console.log('setting "o.bar" to',val);}
  }
});

function Constructor(){}
o=new Constructor();
//相當於
o=Object.create(Constructor.prototype);
//如果Constructor里有一些初始化代碼,Object.create不能執行那些代碼

//應該相當於
o={};
o=Object.create(Constructor.prototype);
Constructor.call(o,args);

//創建一個以另一個空對象為原型,且擁有一個屬性p的對象
o=Object.create({},{p:{value:42}});

//省略了的屬性預設為false,所以屬性p是不可寫,不可枚舉,不可配置的
o.p=24;
o.p;//42
o.q=12;
for(var prop in o){
  console.log(prop);
}
//'q'delete o.p;//false

//創建一個可寫的,可枚舉的,可配置的屬性p
o2=Object.create({},{p:{value:42,writable:true,enumerable:true,configurable:true}});

相容版

if(typeof Object.create !== 'function'){
  Object.create=(function(){
     function NOP(){}
     var hasOwn=Object.prototype.hasOwnProperty;
     return function(o){
       //1、如果o不是Object或null,拋出一個類型錯誤異常
       if(typeof o!=='object'){
          throw TypeError('Object prototype may only be an Object or null.');
       }
       //2、使創建的一個新的對象為obj
       //3、設置obj的內部屬性[[Prototype]]為o
       NOP.prototype=o;
       var obj=new NOP();
       NOP.prototype=null;//解除NOP函數的prototype的引用
       //4、如果參數有Properties,那麼檢測並添加屬性到obj上。
       if(arguments.length>1){
          var Properties=Object(arguments[1]);
          for(var prop in Properties){
             if(hasOwn.call(Properties,prop)){
                obj[prop]=Properties[prop];
             }
          }
       }
       return obj;
     }
  })();
}

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 異常的練習: 老師用電腦上課。開始思考上課中出現的問題。比如問題是 電腦藍屏。 電腦冒煙。要對問題進行描述,封裝成對象。可是當冒煙發生後,出現講課進度無法繼續。出現了講師的問題:課時計劃無法完成。 運行結果: NoPlanException: 上課無法繼續,因為電腦冒煙了 class Teacher ...
  • C++的深拷貝和淺拷貝 淺拷貝也叫位拷貝(bitwise assignment),意思就是將一個對象的記憶體映像按位原封不動的複製給另一個對象。如果欄位是值類型的,則對該欄位執行逐位複製;如果欄位是引用類型,則複製引用但不複製引用的對象。 如果改變目標對象中引用型欄位的值他將反映在原是對象中,也就是說 ...
  • http://blog.csdn.net/csh624366188/article/details/7183872 http://www.cnblogs.com/zhhh/archive/2011/06/10/2077519.html 又看到有人在問三層架構和MVC的關係,感覺這種問題有點教條化了。 ...
  • 1.點擊桌面的我Windows 圖標,找打控制面板 2.進入控制面板主頁,選擇系統和安全,進入系統和安全 3.進入系統和安全主頁後選擇管理工具,點擊進入 4.進入管理工具後,選擇數據源,進行數據源的配置 5.打開頁面之後點擊添加 6.打開添加頁面,選擇SQL SEVER 然後選擇完成 7.完成後進入 ...
  • addEventListener 用於註冊事件處理程式,IE 中為 attachEvent,我們為什麼講 addEventListener 而不講 attachEvent 呢?一來 attachEvent 比較簡單,二來 addEventListener 才是 DOM 中的標準內容。 簡介 addE ...
  • 最近一段時間要畢業了,忙著找工作,見過不少筆試面試題,自己總結了一些加上網上找的一些整合了一下。答案暫時都東拼西湊出來了,但是還是先不發出來,一方面是答案並不是唯一的並且自己的答案不能保證對,另一方面希望看到本文的伙伴能自己去找答案,畢竟,技術只有自己真正理解了才是自己的東西,共勉。 小白第一次發文 ...
  • js獲取url中的參數 function UrlSearch() { var name, value; var str = location.href; //取得整個地址欄 var num = str.indexOf("?") str = str.substr(num + 1); //取得所有參數 ...
  • 本文是【Knockout.js 學習體驗之旅】系列文章的第3篇,所有demo均基於目前knockout.js的最新版本(3.4.0)。小茄才識有限,文中若有不當之處,還望大家指出。 目錄: 【Knockout.js 學習體驗之旅】(1)ko初體驗 【Knockout.js 學習體驗之旅】(2)花式捆 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...