[TOC]
# instanceof
[參考鏈接](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/instanceof)
`instanceof` 運算符用來測試一個對象在其原型鏈中是否存在一個構(gòu)造函數(shù)的`prototype`屬性
`object instanceof constructor`，`object`要檢測的對象，`constructor`某個構(gòu)造函數(shù)
```javascript
// 定義構(gòu)造函數(shù)
function C(){}
function D(){}
var o = new C();
o instanceof C;
// true 因為Object.getPrototypeOf(o) === C.prototype
o instanceof D;
// false 因為D.prototype不在o的原型鏈上
o instanceof Object;
// true 因為Object.prototype.isPrototypeOf(o) 返回true
C.prototype instanceof Object
// true 同上
C.prototype = {};
var o2 = new C();
o2 instanceof C;
// true
o instanceof C;
// false C.prototype指向了一個空對象，這個空對象不再o的原型鏈上
D.prototype = new C(); //繼承
var o3 = new D();
o3 instanceof D; // true
o3 instanceof C; // true
```
# Symbol 創(chuàng)建私有屬性
[參考鏈接1](https://developer.mozilla.org/zh-CN/docs/Glossary/Symbol) [參考鏈接2](http://es6.ruanyifeng.com/#docs/symbol)
`Symbol`為一種數(shù)據(jù)類型，可以使用此類型的值來創(chuàng)建匿名的對象屬性，此類型作為一個私有對象屬性的鍵，用于類或?qū)ο箢愋偷膬?nèi)部使用。
```javascript
var privateVal = Symbol();
this[privateVal] = function(){};
```
該屬性為匿名且不可枚舉，訪問全局`Symbol`的方式為`Symbol.for()`和`Symbol.keyFor()`
`Symbol`值作為屬性名時，該屬性還是公開屬性，不是私有屬性
消除魔術(shù)字符串
```javascript
const shapeType = {
triangle: 'Triangle'
};
function getArea(shape, options) {
let area = 0;
switch (shape) {
case shapeType.triangle:
area = .5 * options.width * options.height;
break;
}
return area;
}
getArea(shapeType.triangle, { width: 100, height: 100 });
// 改寫為
const shapeType = {
triangle: Symbol()
};
```
# Object.create
[參考鏈接1](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create) [參考鏈接2](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty)
`Object.create(proto, [propertiesObject])` 方法會使用指定的原型對象及屬性去創(chuàng)建一個新的對象，`proto`一個對象，新創(chuàng)建對象的原型，`propertiesObject`一組屬性與值，該對象的屬性名稱將是新創(chuàng)建對象的熟悉名稱
單繼承
```javascript
//Shape - 超類
function Shape() {
this.x = 0;
this.y = 0;
}
Shape.prototype.move = function(x, y) {
this.x += x;
this.y += y;
console.info("Shape moved.");
};
// Rectangle - 子類
function Rectangle() {
Shape.call(this); //超類的this指向子類.
}
// 子類繼承超類
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle; // 將構(gòu)造器函數(shù)指向子類本身
var rect = new Rectangle();
console.log('Is rect an instance of Rectangle?',
rect instanceof Rectangle); // true
console.log('Is rect an instance of Shape?',
rect instanceof Shape); // true
rect.move(1, 1); //Outputs, "Shape moved."
```
多對象繼承
```javascript
function MyClass() {
SuperClass.call(this);
OtherSuperClass.call(this);
}
// 繼承其中一個超類
MyClass.prototype = Object.create(SuperClass.prototype);
// 通過合并prototype繼承另一個超類
Object.assign(MyClass.prototype, OtherSuperClass.prototype);
// 將prototype的構(gòu)造器指向本身
MyClass.prototype.constructor = MyClass;
MyClass.prototype.myMethod = function() {
// do a thing
};
```
propertyObject參數(shù)
```javascript
var o;
// 創(chuàng)建一個原型為null的空對象
o = Object.create(null);
o = {};
// 以字面量方式創(chuàng)建的空對象就相當(dāng)于:
o = Object.create(Object.prototype);
o = Object.create(Object.prototype, {
// foo會成為所創(chuàng)建對象的數(shù)據(jù)屬性
foo: {
writable:true,
configurable:true,
value: "hello"
},
// bar會成為所創(chuàng)建對象的訪問器屬性
bar: {
configurable: false,
get: function() { return 10 },
set: function(value) {
console.log("Setting `o.bar` to", value);
}
}
});
function Constructor(){}
o = new Constructor();
// 上面的一句就相當(dāng)于:
o = Object.create(Constructor.prototype);
// 當(dāng)然,如果在Constructor函數(shù)中有一些初始化代碼,Object.create不能執(zhí)行那些代碼
// 創(chuàng)建一個以另一個空對象為原型,且擁有一個屬性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
//創(chuàng)建一個可寫的,可枚舉的,可配置的屬性p
o2 = Object.create({}, {
p: {
value: 42,
writable: true,
enumerable: true,
configurable: true
}
});
```
兼容寫法
```javascript
if (typeof Object.create !== "function") {
Object.create = function (proto, propertiesObject) {
if (!(proto === null || typeof proto === "object" || typeof proto === "function")) {
throw TypeError('Argument must be an object, or null');
}
var temp = new Object();
temp.__proto__ = proto;
if(typeof propertiesObject ==="object")
Object.defineProperties(temp,propertiesObject);
return temp;
};
}
return Object.create(proto, propertiesObject)
```
# 繼承與原型鏈
[參考鏈接1](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)
每個對象都有一個私有屬性[[Prototype]]，它持有一個連接到另一個稱其為`prototype`對象的鏈接。`null`沒有`prototype`。當(dāng)試圖訪問一個對象的屬性時，它不僅僅在該對象上搜尋，還會搜尋該對象的原型，以及該對象的原型的原型，依次層層向上搜索，直到找到一個名字匹配的屬性或到達原型鏈的末尾。
可以用`Object.getPrototypeOf()`和`Object.setPrototypeOf()`進行訪問。
當(dāng)繼承的函數(shù)被調(diào)用時，`this` 指向的是當(dāng)前繼承的對象，而不是繼承的函數(shù)所在的原型對象。
要清楚代碼中原型鏈的長度，并在必要時結(jié)束原型鏈，以避免可能存在的性能問題。此外，除非為了兼容新 JavaScript 特性，否則，永遠不要擴展原生的對象原型。
# call、apply和bind
[參考鏈接1](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this)
`this`的指向和函數(shù)的調(diào)用方式有關(guān)系。
函數(shù)直接調(diào)用，`this`指向全局對象
```javascript
function f1(){
return this;
}
//在瀏覽器中：
f1() === window; //在瀏覽器中，全局對象是window
//在Node中：
f1() === global;
// 嚴格模式下則會變?yōu)閡ndefined
function f2(){
"use strict"; // 這里是嚴格模式
return this;
}
f2() === undefined; // true
```
通過`call`和`apply`方法改變`this`的指向，從一個`context`傳到另一個
```javascript
// 一個對象可以作為call和apply的第一個參數(shù)，并且this會被綁定到這個對象。
var obj = {a: 'Custom'};
// 這個屬性是在global對象定義的。
var a = 'Global';
function whatsThis(arg) {
return this.a; // this的值取決于函數(shù)的調(diào)用方式
}
whatsThis(); // 直接調(diào)用， 返回'Global'
whatsThis.call(obj); // 通過call調(diào)用， 返回'Custom'
whatsThis.apply(obj); // 通過apply調(diào)用 ，返回'Custom'
```
```javascript
function add(c, d) {
return this.a + this.b + c + d;
}
var o = {a: 1, b: 3};
// 第一個參數(shù)是作為‘this’使用的對象
// 后續(xù)參數(shù)作為參數(shù)傳遞給函數(shù)調(diào)用
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
// 第一個參數(shù)也是作為‘this’使用的對象
// 第二個參數(shù)是一個數(shù)組，數(shù)組里的元素用作函數(shù)調(diào)用中的參數(shù)
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34
```
`bind`，調(diào)用`f.bind(xx)`會創(chuàng)建一個與f具有相同函數(shù)體和作用域的函數(shù)，`this`將永久被綁定到了`bind`的第一個參數(shù)，無論這個函數(shù)如何被調(diào)用
```javascript
function f(){
return this.a;
}
//this被固定到了傳入的對象上
var g = f.bind({a:"azerty"});
console.log(g()); // azerty
var h = g.bind({a:'yoo'}); //bind只生效一次！
console.log(h()); // azerty
var o = {a:37, f:f, g:g, h:h};
console.log(o.f(), o.g(), o.h()); // 37, azerty, azerty
```
`箭頭函數(shù)`的`this`是根據(jù)當(dāng)前的詞法的作用域來決定的
```javascript
var globalObject = this;
var foo = (() => this);
console.log(foo() === globalObject); // true
```
無法通過`call`、`apply`或者`bind`進行改變
```javascript
// 接著上面的代碼
// 作為對象的一個方法調(diào)用
var obj = {foo: foo};
console.log(obj.foo() === globalObject); // true
// 嘗試使用call來設(shè)定this
console.log(foo.call(obj) === globalObject); // true
// 嘗試使用bind來設(shè)定this
foo = foo.bind(obj);
console.log(foo() === globalObject); // true
```
`this`被當(dāng)做對象的一個方法調(diào)用是，指向的是調(diào)用該函數(shù)的對象
```javascript
var o = {
prop: 37,
f: function() {
return this.prop;
}
};
console.log(o.f()); // logs 37
```
不受函數(shù)定義方式或者位置的影響，只和調(diào)用方式有關(guān)
```javascript
var o = {prop: 37};
function independent() {
return this.prop;
}
o.f = independent;
console.log(o.f()); // logs 37
```
在原型鏈中也是一致，`this`指向的是調(diào)用改方法的對象
```javascript
var o = {
f : function(){
return this.a + this.b;
}
};
var p = Object.create(o);
p.a = 1;
p.b = 4;
console.log(p.f()); // 5
```
在`getter`和`setter`中，會把`this`綁定到正在設(shè)置或獲取屬性的對象
```javascript
function sum() {
return this.a + this.b + this.c;
}
var o = {
a: 1,
b: 2,
c: 3,
get average() {
return (this.a + this.b + this.c) / 3;
}
};
Object.defineProperty(o, 'sum', {
get: sum, enumerable: true, configurable: true});
console.log(o.average, o.sum); // logs 2, 6
```
當(dāng)一個函數(shù)用作構(gòu)造函數(shù)時(`new`)，它的`this`被綁定到正在構(gòu)造的新對象
```javascript
/*
* 構(gòu)造函數(shù)這樣工作:
*
* function MyConstructor(){
* // 函數(shù)實體寫在這里
* // 根據(jù)需要在this上創(chuàng)建屬性，然后賦值給它們，比如：
* this.fum = "nom";
* // 等等...
*
* // 如果函數(shù)具有返回對象的return語句，則該對象將是 new 表達式的結(jié)果。
* // 否則，表達式的結(jié)果是當(dāng)前綁定到 this 的對象。
* //（即通?？吹降某Ｒ娗闆r）。
* }
*/
function C(){
this.a = 37;
}
var o = new C();
console.log(o.a); // logs 37
function C2(){
this.a = 37;
return {a:38}; // 手動設(shè)置了返回，若為對象則 this.a 變?yōu)閌僵尸代碼`
}
o = new C2();
console.log(o.a); // logs 38
```
# 變量的作用域
沒有加上`var`關(guān)鍵字則代表全局作用域。
如果在函數(shù)內(nèi)定義變量，則變量的作用域在函數(shù)體內(nèi)。
如果在函數(shù)外定義變量，則可以在函數(shù)內(nèi)調(diào)用。
# 變量的生存周期
函數(shù)內(nèi)調(diào)用的變量，則生存周期在函數(shù)調(diào)用期間有效
# 閉包
[參考鏈接1](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures) [參考鏈接2](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Details_of_the_Object_Model)
被作用域封閉的變量，函數(shù)等執(zhí)行的一個函數(shù)的作用域，可以在一定程度上延長變量的生存周期。
由兩部分構(gòu)成：函數(shù)，以及創(chuàng)建該函數(shù)的環(huán)境。
```javascript
// 創(chuàng)建一個閉包函數(shù)
function makeAdder(x) {
return function(y) {
return x + y;
};
}
var add5 = makeAdder(5); // 第一次調(diào)用 返回一個function(y){...}的匿名函數(shù)，這時保存了變量x的值，不會因為makeAdder函數(shù)執(zhí)行結(jié)束而銷毀
var add10 = makeAdder(10);
console.log(add5(2)); // 7,第二次調(diào)用
console.log(add10(2)); // 12
```
用閉包模擬私有方法
```javascript
var makeCounter = function() { // 創(chuàng)建一個環(huán)境
var privateCounter = 0; // 只能在該環(huán)境中訪問到的變量，外界無法訪問
function changeBy(val) {
privateCounter += val;
}
return { // 定義接口
increment: function() {
changeBy(1);
},
decrement: function() {
changeBy(-1);
},
value: function() {
return privateCounter;
}
}
};
var Counter1 = makeCounter(); // 再分配到不同的環(huán)境中
var Counter2 = makeCounter();
console.log(Counter1.value()); /* logs 0 */
Counter1.increment();
Counter1.increment();
console.log(Counter1.value()); /* logs 2 */
Counter1.decrement();
console.log(Counter1.value()); /* logs 1 */
console.log(Counter2.value()); /* logs 0 */
```
匿名閉包
```javascript
function showHelp(help) {
document.getElementById('help').innerHTML = help;
}
function setupHelp() {
var helpText = [
{'id': 'email', 'help': 'Your e-mail address'},
{'id': 'name', 'help': 'Your full name'},
{'id': 'age', 'help': 'Your age (you must be over 16)'}
];
for (var i = 0; i < helpText.length; i++) {
(function() { // 每次循環(huán)都創(chuàng)建一個新的環(huán)境
var item = helpText[i];
document.getElementById(item.id).onfocus = function() {
showHelp(item.help);
}
})(); // Immediate event listener attachment with the current value of item (preserved until iteration).
}
}
setupHelp();
```
# 高階函數(shù)
[參考鏈接1](http://www.cnblogs.com/laixiangran/p/5468567.html)
滿足其中一個條件即可：函數(shù)可以作為參數(shù)被傳遞；函數(shù)可以作為返回值輸出。
顯然`js`中的函數(shù)滿足高階函數(shù)的需求，例如`ajax`和`Array.prototype.sort`
# AOP
[參考鏈接1](http://www.cnblogs.com/laixiangran/p/5468567.html)
面向切面編程的主要作用是把一些跟核心業(yè)務(wù)邏輯模塊無關(guān)的功能抽離出來，這些跟業(yè)務(wù)邏輯無關(guān)的功能通常包括日志統(tǒng)計、安全控制、異常處理等。把這些功能抽離出來之后，再通過“動態(tài)織入”的方式摻入業(yè)務(wù)邏輯模塊中。
```javascript
Function.prototype.before = function(beforefn) {
var __self = this; // 保存原函數(shù)的引用
return function() { // 返回包含了原函數(shù)和新函數(shù)的"代理"函數(shù)
beforefn.apply(this, arguments); // 執(zhí)行新函數(shù)，修正this
return __self.apply(this, arguments); // 執(zhí)行原函數(shù)
}
};
Function.prototype.after = function(afterfn) {
var __self = this;
return function() {
var ret = __self.apply(this, arguments);
afterfn.apply(this, arguments);
return ret;
}
};
var func = function() {
console.log(2);
};
func = func.before(function() {
console.log(1);
}).after(function() {
console.log(3);
});
func();
// 按順序打印出1，2，3
```
# 函數(shù)科里化
[參考鏈接1](http://www.cnblogs.com/laixiangran/p/5468567.html)
部分求值。一個currying的函數(shù)首先會接受一些參數(shù)，接受了這些參數(shù)之后，該函數(shù)并不會立即求值，而是繼續(xù)返回另外一個函數(shù)，剛才傳入的參數(shù)在函數(shù)形成的閉包中被保存起來。待到函數(shù)被真正需要求值的時候，之前傳入的所有參數(shù)都會被一次性用于求值。
```javascript
// 通用currying函數(shù)，接受一個參數(shù)，即將要被currying的函數(shù)
var currying = function(fn) {
var args = [];
return function() {
if (arguments.length === 0) {
return fn.apply(this, args);
} else {
[].push.apply(args, arguments);
return arguments.callee;
}
}
};
// 將被currying的函數(shù)
var cost = (function() {
var money = 0;
return function() {
for (var i = 0, l = arguments.length; i < l; i++) {
money += arguments[i];
}
return money;
}
})();
var cost = currying( cost ); // 轉(zhuǎn)化成currying函數(shù)
cost( 100 ); // 未真正求值
cost( 200 ); // 未真正求值
cost( 300 ); // 未真正求值
console.log (cost()); // 求值并輸出：600
```
# uncurrying
[參考鏈接1](http://www.cnblogs.com/laixiangran/p/5468567.html)
將泛化this的過程提取出來，將fn.call或者fn.apply抽象成通用的函數(shù)。
```javascript
// uncurrying實現(xiàn)
Function.prototype.uncurrying = function() {
var self = this;
return function() {
return Function.prototype.call.apply(self, arguments);
}
};
// 將Array.prototype.push進行uncurrying，此時push函數(shù)的作用就跟Array.prototype.push一樣了，且不僅僅局限于只能操作array對象。
var push = Array.prototype.push.uncurrying();
var obj = {
"length": 1,
"0": 1
};
push(obj, 2);
console.log(obj); // 輸出：{0: 1, 1: 2, length: 2}
```
# 函數(shù)節(jié)流
[參考鏈接1](http://www.cnblogs.com/laixiangran/p/5468567.html)
當(dāng)一個函數(shù)被頻繁調(diào)用時，如果會造成很大的性能問題的時候，這個時候可以考慮函數(shù)節(jié)流，降低函數(shù)被調(diào)用的頻率。
throttle函數(shù)的原理是，將即將被執(zhí)行的函數(shù)用setTimeout延遲一段時間執(zhí)行。如果該次延遲執(zhí)行還沒有完成，則忽略接下來調(diào)用該函數(shù)的請求。throttle函數(shù)接受2個參數(shù)，第一個參數(shù)為需要被延遲執(zhí)行的函數(shù)，第二個參數(shù)為延遲執(zhí)行的時間。
```javascript
var throttle = function(fn, interval) {
var __self = fn, // 保存需要被延遲執(zhí)行的函數(shù)引用
timer, // 定時器
firstTime = true; // 是否是第一次調(diào)用
return function() {
var args = arguments,
__me = this;
if (firstTime) { // 如果是第一次調(diào)用，不需延遲執(zhí)行
__self.apply(__me, args);
return firstTime = false;
}
if (timer) { // 如果定時器還在，說明前一次延遲執(zhí)行還沒有完成
return false;
}
timer = setTimeout(function() { // 延遲一段時間執(zhí)行
clearTimeout(timer);
timer = null;
__self.apply(__me, args);
}, interval || 500 );
};
};
window.onresize = throttle(function() {
console.log(1);
}, 500 );
```
# 分時函數(shù)
[參考鏈接1](http://www.cnblogs.com/laixiangran/p/5468567.html)
當(dāng)一次的用戶操作會嚴重地影響頁面性能，如在短時間內(nèi)往頁面中大量添加DOM節(jié)點顯然也會讓瀏覽器吃不消，我們看到的結(jié)果往往就是瀏覽器的卡頓甚至假死。
timeChunk函數(shù)接受3個參數(shù)，第1個參數(shù)是創(chuàng)建節(jié)點時需要用到的數(shù)據(jù)，第2個參數(shù)是封裝了創(chuàng)建節(jié)點邏輯的函數(shù)，第3個參數(shù)表示每一批創(chuàng)建的節(jié)點數(shù)量。
```javascript
var timeChunk = function(ary, fn, count) {
var t;
var start = function() {
for ( var i = 0; i < Math.min( count || 1, ary.length ); i++ ){
var obj = ary.shift();
fn( obj );
}
};
return function() {
t = setInterval(function() {
if (ary.length === 0) { // 如果全部節(jié)點都已經(jīng)被創(chuàng)建好
return clearInterval(t);
}
start();
}, 200); // 分批執(zhí)行的時間間隔，也可以用參數(shù)的形式傳入
};
};
```
# 惰性加載函數(shù)
[參考鏈接1](http://www.cnblogs.com/laixiangran/p/5468567.html)
在Web開發(fā)中，因為瀏覽器之間的實現(xiàn)差異，一些嗅探工作總是不可避免。比如我們需要一個在各個瀏覽器中能夠通用的事件綁定函數(shù)addEvent，常見的寫法如下：
方案一：
```javascript
var addEvent = function(elem, type, handler) {
if (window.addEventListener) {
return elem.addEventListener(type, handler, false);
}
if (window.attachEvent) {
return elem.attachEvent('on' + type, handler);
}
};
```
缺點：當(dāng)它每次被調(diào)用的時候都會執(zhí)行里面的if條件分支，雖然執(zhí)行這些if分支的開銷不算大，但也許有一些方法可以讓程序避免這些重復(fù)的執(zhí)行過程。
方案二：
```javascript
var addEvent = (function() {
if (window.addEventListener) {
return function(elem, type, handler) {
elem.addEventListener(type, handler, false);
}
}
if (window.attachEvent) {
return function(elem, type, handler) {
elem.attachEvent('on' + type, handler);
}
}
})();
```
缺點：也許我們從頭到尾都沒有使用過addEvent函數(shù)，這樣看來，一開始的瀏覽器嗅探就是完全多余的操作，而且這也會稍稍延長頁面ready的時間。
方案三：
```javascript
var addEvent = function(elem, type, handler) {
if (window.addEventListener) {
addEvent = function(elem, type, handler) {
elem.addEventListener(type, handler, false);
}
} else if (window.attachEvent) {
addEvent = function(elem, type, handler) {
elem.attachEvent('on' + type, handler);
}
}
addEvent(elem, type, handler);
};
```
此時addEvent依然被聲明為一個普通函數(shù)，在函數(shù)里依然有一些分支判斷。但是在第一次進入條件分支之后，在函數(shù)內(nèi)部會重寫這個函數(shù)，重寫之后的函數(shù)就是我們期望的addEvent函數(shù)，在下一次進入addEvent函數(shù)的時候，addEvent函數(shù)里不再存在條件分支語句。
AI寫作智能體 自主規(guī)劃任務(wù)，支持聯(lián)網(wǎng)查詢和網(wǎng)頁讀取，多模態(tài)高效創(chuàng)作各類分析報告、商業(yè)計劃、營銷方案、教學(xué)內(nèi)容等。
![]()
廣告