js好文

apply,call,bind:添加鏈接描述

js包裝對象:添加鏈接描述

JS屬性描述對象:添加鏈接描述

數據類型概述:添加鏈接描述

js語言的對象體系,不是基於類的,而是基於構造函數和原型鏈。JavaScript 語言使用構造函數(constructor)作爲對象的模板。所謂”構造函數”,就是專門用來生成實例對象的函數。它就是對象的模板,描述實例對象的基本結構。一個構造函數,可以生成多個實例對象,這些實例對象都有相同的結構。

構造函數就是一個普通的函數,但是有自己的特徵和用法。

var Vehicle = function () {
  this.price = 1000;
};
上面代碼中,Vehicle就是構造函數。爲了與普通函數區別,構造函數名字的第一個字母通常大寫。
構造函數的特點有兩個:
函數體內部使用了this關鍵字,代表了所要生成的對象實例。
生成對象的時候,必須使用new命令。

new命令的作用,就是執行構造函數,返回一個實例對象。
var Vehicle = function () {
  this.price = 1000;
};

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

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

爲了保證構造函數必須與new命令一起使用,一個解決方法是,構造函數內部使用嚴格模式,即第一行加上,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

上面代碼中的構造函數,不管加不加new命令,都會得到同樣的結果。

new命令的原理:
使用new命令時,它後面的函數依次執行下面的步驟:
1:創建一個空對象,作爲將要返回對象的實例。
2:將這個空對象的原型,指向構造函數的prototype屬性。
3:將這個空對象賦值給函數內部的this關鍵字。
4:開始執行構造函數內部的代碼。

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

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

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

(new Vehicle()) === 1000 // false

上面代碼中,構造函數Vehicle的return返回一個數值。這時,new命令就會忽略這個return語句,返回構造後的this對象。

但是,如果return語句返回的是一個跟this無關的新對象,new命令就會返回這個新對象,而不是this對象,這一點需要特別注意。
var Vehicle = function (){
  this.price = 1000;
  return { price: 2000 };
};

(new Vehicle()).price // 2000

上面代碼中,構造函數Vehicle的return語句,返回的是一個新對象,new命令就會返回這個新對象,而不是this對象。

JS面向對象—this關鍵字:添加鏈接描述

JS Storage接口:添加鏈接描述

window對象可以接收以下事件:
load事件發生在文檔在瀏覽器窗口加載完畢時。window.onload屬性可以指定這個事件的回調函數。

window.onload = function() {
  var elements = document.getElementsByClassName('example');
  for (var i = 0; i < elements.length; i++) {
    var elt = elements[i];
    // ...
  }
};
上面代碼在網頁加載完畢後,獲取指定元素並進行處理。

JS 同源限制:添加鏈接描述

CORS:添加鏈接描述 添加鏈接描述 添加鏈接描述

JS數據類型—數組:添加鏈接描述

JS面向對象—Object對象的相關方法:添加鏈接描述

JS異步操作—概述:添加鏈接描述

JS異步操作—定時器:添加鏈接描述

JS Array 對象:添加鏈接描述

DOM—Node接口:添加鏈接描述 添加鏈接描述

DOM—Mutation Observer API:添加鏈接描述

DOM—Text節點和DocumentFragment節點:添加鏈接描述

DOM—屬性的操作:添加鏈接描述

DOM—Element節點:添加鏈接描述

DOM—Document節點:添加鏈接描述

DOM—ParentNode接口,ChildNode接口:添加鏈接描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章