1. 程式人生 > >讀《JavaScript 面向物件精要》和《JavaScript 啟示錄》精華總結

讀《JavaScript 面向物件精要》和《JavaScript 啟示錄》精華總結

導讀:本文詳細總結了JavaScript 面向物件基礎的知識點,主要來自《JavaScript 面向物件精要》《JavaScript 啟示錄》這兩本書,推薦給各位做做開發的朋友。

目錄

引子:

最近看了兩本書,書中有些內容對自己還是很新的,有些內容是之前自己理解不夠深的,所以拿出來總結一下,這兩本書的名字如下:

  • JavaScript 面向物件精要

  • JavaScript 啟示錄

如果對於 JavaScript 面向物件程式設計理解不夠深的話,第一本書還是強烈推薦的。第二本書比較適合初中級的開發者閱讀。對各種知識點都有程式碼示例。內容中規中矩。

1.JavaScript 中的變數型別和型別檢測

C#和Java等程式語言用棧儲存原始型別,用堆儲存引用型別,JavaScript則完全不同:它使用一個變數物件追蹤變數的生存期。原始值被直接儲存在變數物件內,而引用值則作為一個指標儲存在變數物件內,該指標指向實際物件在記憶體中的儲存位置。

1.1原始型別

在 JavaScript 中有5中原始型別,分別如下:

型別表示式 型別描述
boolean 布林,值為 false或者 true
number 數字,值為任何整型或者浮點數值
string
字串,值由單引號或者雙引號括出的單個字元或者連續字元(JavaScript不區分字元
null 空型別,該原始型別僅有一個值:null
undefined 未定義,該原始型別僅有一個值:undefined(undefined會被賦給一個還沒有初始化的變

所有原始型別的值都有字面形式,字面形式是不被儲存在變數中的值。

//stringvar name='zhiqiang';var selection='a';//numbervar count=235;var cost=1.51;//booleanvar found=true;//nullvar
object=null;//undefinedvar flag=undefined;var ref;console.log(ref);//undefined

原始型別的變數直接儲存原始值(而不是一個指向物件的指標)。當將原始值賦值給一個變數時,該值將被複制到變數中。也就是說,如果你使一個變數等於另一個時,每個變數有它自己的一份資料拷貝。

示例程式碼如下:

var color1='red';var color2=color1;

記憶體中的儲存形式,如下圖:

1.2引用型別

引用型別是在JavaScript中找到最能接近類的東西。引用值是引用型別的例項,也是物件的同義詞。屬性包含鍵(始終是字串)和值。如果一個屬性的值是函式,它就被稱為方法。JavaScript中函式其實是引用值,除了函式可以執行以外,一個包含陣列的屬性和一個包含函式的屬性沒有區別。

建立引用型別的兩種方式看下面的一段程式碼:

//第一種使用new操作符var obj1 =newObject();//var obj2 = obj1;//第二種var obj3 ={}

以上兩種建立物件的方式並沒有本質的區別,是等價的。

那麼當我們建立了一個物件,且發生了賦值的時候,在記憶體中發生了什麼呢?

看下圖:

1.當發生了new操作的時候,先在記憶體中開闢一塊空間,存放建立的物件,並且使obj1指向這塊開闢的空間;

2.引用型別發生賦值的時候,僅僅是引用地址指向了記憶體中的同一塊區域;

JavaScript語言有"垃圾回收"功能,所以在使用引用型別的時候無需擔心記憶體分配。但是為了防止"記憶體洩露"還是應該在不實用物件的時候將該物件的引用賦值為null。讓"垃圾回收"器在特定的時間對那一塊記憶體進行回收。

1.3內建型別的例項化

JavaScript中的內建型別如下:

型別 型別描述
Array 陣列型別,以數字為索引的一組值的有序列表
Date 日期和時間型別
Error 執行期錯誤型別
Function 函式型別
Object 通用物件型別
RegExp 正則表示式型別

內建引用型別有字面形式。字面形式允許你在不需要使用new操作符和建構函式顯式建立物件的情況下生成引用值。(包括字串,數字,布林,空型別和未定義);

1.4函式的字面形式

建立函式的三種方式:

//第一種函式宣告function abc(){
    console.log(1);}//使用建構函式的形式var value =newFunction('','console.log(1)');//函式表示式var a =function(){
    console.log(1);};

使用建構函式的方式建立函式,不易讀,且除錯不方便,不建議使用這種方式建立函式。

1.5正則表示式的字面形式

在JavaScript中使用正則表示式有兩種方式:

var a1 =/\d+/g;//使用字面形式var a2 =newRegExp('\\d+','g');//使用建構函式的形式

在JavaScript中建議使用字面形式的正則表示式,因為不需要擔心字串中的轉義字元。比如上面示例程式碼中字面形式使用\d而建構函式使用的是\\d

1.6型別檢測

1.6.1原始型別的檢測

使用typeof運算子可以完成對原始型別的檢測,看下面的一段程式碼:

上面的程式碼中有一段比較特殊就是

typeofnull//object

這裡其實是不準確的,如果我們要判斷一個值是否為空型別的最佳的方式是直接和null進行比較

console.log(value ===null);

=====之間的最主要的區別就是前者在進行比較的時候會進行型別轉化,而後者不會;

console.log(5==5);//trueconsole.log('5'==5);//falseconsole.log('5'===5);//fasle

1.6.2鑑別引用型別

JavaScript中對於引用型別的檢測較為複雜。對於函式型別的引用使用typeof返回的是Function,而對於非函式的引用型別返回的則是object。所以在JavaScript中鑑別引用型別的型別引入了instanceof

instanceof操作符以一個物件和一個建構函式作為引數;

function a (){}var b ={};var c =[];typeof a   // functiontypeof b  //objecttypeof c //objecta instanceof Function
            
           

相關推薦

JavaScript 面向物件JavaScript 啟示錄精華總結

導讀:本文詳細總結了JavaScript 面向物件基礎的知識點,主要來自《JavaScript 面向物件精要》《JavaScript 啟示錄》這兩本書,推薦給各位做做開發的朋友。 目錄 引子: 最近看了兩本書,書中有些內容對自己還是很新的

JavaScript面向物件(一)

傳統面向物件的語言幾大特徵:封裝、繼承、多型,在JavaScript中並不適用。JavaScript的弱型別特徵允許你用比其他語言更少的程式碼完成同樣的任務。無需提前設計好類再進行編碼。需要一個具有某個欄位的物件了?隨時隨地都可建立。Nicholas

JavaScript面向物件(二)

四、建構函式和原型物件 1. 建構函式 建構函式就是用new建立物件時呼叫的函式。使用建構函式的好處在於所有用同一個建構函式建立的物件都具有同樣的屬性和方法。 function Person(){} var p1 = new Person(); c

javascript面向物件程式設計--設計超類子類,設計元類

在javascript中,Object物件是通用類,其他所有內建物件和自定義構造物件都是專用類,即Object物件是超類,其他內建物件和自定義物件都是Object的子類,所有在javascript語言中,所有的物件都繼承Object定義的屬性和方法 Object.prototype.name='

JavaScript 面向物件之二 —— 函式上下文(call() apply())

本系列文章根據《愛前端邵山歡老師深入淺出的js面向物件》視訊整理歸納 call() 和 apply() 這兩個都是函式的方法,只有函式能夠通過點方法呼叫call()、apply(),表示用指定的上下文執行這個函式。 如下,定義一個函式 fun,當 fun 函式裡

javascript面向物件系列第一篇——建構函式原型物件

前面的話   一般地,javascript使用建構函式和原型物件來進行面向物件程式設計,它們的表現與其他面向物件程式語言中的類相似又不同。本文將詳細介紹如何用建構函式和原型物件來建立物件 建構函式   建構函式是用new建立物件時呼叫的函式,與普通唯一的區別是建構函式名應該首字母大寫 func

JavaScript(面向物件+原型理解+繼承+作用域鏈閉包+this使用總結)

JavaScript(面向物件+原型理解+繼承+作用域鏈和閉包+this使用總結) 一、面向物件 1、什麼是面向物件 ☞ 面向物件就是把構成問題事物分解成多個物件,建立物件不是為了

javaScript 面向物件--封裝prototype屬性

一般面向物件的語言都具有三大特徵,封裝、繼承,多型,例如像java 和c++。但是javaScript它可以說不是完全的面向物件的語言,因為它沒有類的概念,但是它又是面向物件的,因為它可以封裝屬性和方法,並且也可以實現繼承。 1、字面量模式 字面量的模式

javascript 面向物件學習(三)——this,bind、apply call

this 是 js 裡繞不開的話題,也是非常容易混淆的概念,今天試著把它理一理。 this 在非嚴格模式下,總是指向一個物件,在嚴格模式下可以是任意值,本文僅考慮非嚴格模式。記住它總是指向一個物件對於理解它的意義很重要。this 在實際使用中,大致分為以下幾種情況: 1. 函式作為物件的方法呼叫時,this

JavaScript 面向物件程式設計實現

JavaScript 面向物件程式設計實現 本文主要講述js面向物件的實現方式(繼承) 面向物件本來就是把某些問題(邏輯),用物件的方式描述,使得業務邏輯能更加清晰,提高維護性,降低實現複雜度。 面向物件的三大特徵:封裝,多型,繼承。(JavaScript 是沒有多型的特性的

javascript 定義物件、方法屬性的使用方法(prototype)

prototype 定義和用法 prototype 屬性使您有能力向物件新增屬性和方法。 語法 object.prototype = { 函式名 : function(){} } object.prototype.name=value javaSc

javascript面向物件程式設計--惰性載入函式(瀏覽器相容性處理)

因為各大瀏覽器所使用的JS引擎不同,所以在實現某一個功能時都或多或少的存在差異,導致在寫程式碼時要針對每一個功能給出相容瀏覽器的不同實現方式,這樣在執行程式碼時就會造成效能的損耗。所以就出現了惰性載入函式的概念。原理就是:當前瀏覽器第一次支援以該方法實現某功能,那麼在這個頁面執行期間會一直都支援該方

javascript面向物件程式設計--繼承--多重繼承+摻元類(多親繼承)

繼承一般包括 單向繼承 和 多重繼承   多重繼承:一個子類繼承多個超類 function A(x){this.x=x;} A.prototype.getx=function(){return  this.x;} function B(y){this.y=y;}

javascript面向物件程式設計--安全構造物件

建構函式 其實就是一種 使用new運算子的函式 function Person(name,age,job){      this.name=name;     this.age=age;     this.job=

javascript面向物件程式設計--惰性例項化(實現按需例項化)

javascript是以物件為基礎,以函式為模型,以原型為繼承機制的開發模式 惰性例項化:避免在頁面中使用javascript初始化執行時就例項化類,而是將一些類的例項化推遲到需要時候才去例項化,避免資源過早的消耗 var myNamespace=function(){   &

javascript面向物件程式設計--建構函式 實現動態構造

在面向物件過程中,構造和析構是類的兩個重要特性,建構函式在物件建立時候呼叫,解構函式在物件銷燬時被呼叫 建構函式:   function F(x,y){ this.x=x;this.y=y}   var f=new F(1,2);  alert(f.co

javascript面向物件程式設計--多型

方法過載和覆蓋(重寫) 過載:同名方法可以有多個實現,根據引數的型別,引數值,引數個數決定執行行為 var map=function(arr,callback,pThis){    var len=arr.length;   var rlt=new Ar

javascript面向物件程式設計--靜態方法

在面向物件程式設計中,類是不能夠直接訪問的,必須例項化後才可以訪問,大多數方法和屬性與類的例項產生聯絡。但是靜態屬性和方法與類本身直接聯絡,可以從類訪問,如javascript的核心物件中的Math和Global都是靜態物件,不需例項化,可以直接訪問 類的靜態成員(屬性和方法)包括私有和共有兩種

javascript面向物件程式設計--繼承--複製繼承+克隆繼承 混合繼承(常用)

複製繼承:利用for/in語句遍歷物件成員,逐一複製給另一個物件 funciton F(x,y){   this.x=x;  this.y=y; this.add=function(){      return this.x+th

javascript面向物件程式設計--繼承--例項繼承

類繼承和原型繼承的弊端:          它們在客戶端是無法繼承DOM物件的,同時他們也不支援繼承系統物件和方法 類繼承: function D(){ Date.apply(this.arguments);} var d=new D