this的綁定規(guī)則有四種：默認(rèn)綁定，隱式綁定，顯式綁定，new綁定.

函數(shù)是否在 new 中調(diào)用(new綁定)，如果是，那么 this 綁定的是新創(chuàng)建的對(duì)象【前提是構(gòu)造函數(shù)中沒(méi)有返回對(duì)象或者是function，否則this指向返回的對(duì)象/function】。

函數(shù)是否通過(guò) call,apply 調(diào)用，或者使用了 bind (即硬綁定)，如果是，那么this綁定的就是指定的對(duì)象。

函數(shù)是否在某個(gè)上下文對(duì)象中調(diào)用(隱式綁定)，如果是的話(huà)，this 綁定的是那個(gè)上下文對(duì)象。一般是 obj.foo()

如果以上都不是，那么使用默認(rèn)綁定。如果在嚴(yán)格模式下，則綁定到 undefined，否則綁定到全局對(duì)象。

如果把 null 或者 undefined 作為 this 的綁定對(duì)象傳入 call、apply 或者 bind, 這些值在調(diào)用時(shí)會(huì)被忽略，實(shí)際應(yīng)用的是默認(rèn)綁定規(guī)則。

箭頭函數(shù)沒(méi)有自己的 this, 它的this繼承于上一層代碼塊的this。

測(cè)試下是否已經(jīng)成功Get了此知識(shí)點(diǎn)(瀏覽器執(zhí)行環(huán)境):

var number = 5;
var obj = {
    number: 3,
    fn1: (function () {
        var number;
        this.number *= 2;
        number = number * 2;
        number = 3;
        return function () {
            var num = this.number;
            this.number *= 2;
            console.log(num);
            number *= 3;
            console.log(number);
        }
    })()
}
var fn1 = obj.fn1;
fn1.call(null);
obj.fn1();
console.log(window.number);

如果this的知識(shí)點(diǎn)，您還不太懂，請(qǐng)戳: 嗨，你真的懂this嗎？

詞法作用域是由你在寫(xiě)代碼時(shí)將變量和塊作用域?qū)懺谀睦飦?lái)決定的

this 是在調(diào)用時(shí)被綁定的，this 指向什么，完全取決于函數(shù)的調(diào)用位置(關(guān)于this的指向問(wèn)題，本文已經(jīng)有說(shuō)明)

執(zhí)行上下文就是當(dāng)前 JavaScript 代碼被解析和執(zhí)行時(shí)所在環(huán)境, JS執(zhí)行上下文?？梢哉J(rèn)為是一個(gè)存儲(chǔ)函數(shù)調(diào)用的棧結(jié)構(gòu)，遵循先進(jìn)后出的原則。

JavaScript執(zhí)行在單線(xiàn)程上，所有的代碼都是排隊(duì)執(zhí)行。

一開(kāi)始瀏覽器執(zhí)行全局的代碼時(shí)，首先創(chuàng)建全局的執(zhí)行上下文，壓入執(zhí)行棧的頂部。

每當(dāng)進(jìn)入一個(gè)函數(shù)的執(zhí)行就會(huì)創(chuàng)建函數(shù)的執(zhí)行上下文，并且把它壓入執(zhí)行棧的頂部。當(dāng)前函數(shù)執(zhí)行-完成后，當(dāng)前函數(shù)的執(zhí)行上下文出棧，并等待垃圾回收。

瀏覽器的JS執(zhí)行引擎總是訪(fǎng)問(wèn)棧頂?shù)膱?zhí)行上下文。

全局上下文只有唯一的一個(gè)，它在瀏覽器關(guān)閉時(shí)出棧。

作用域鏈: 無(wú)論是 LHS 還是 RHS 查詢(xún)，都會(huì)在當(dāng)前的作用域開(kāi)始查找，如果沒(méi)有找到，就會(huì)向上級(jí)作用域繼續(xù)查找目標(biāo)標(biāo)識(shí)符，每次上升一個(gè)作用域，一直到全局作用域?yàn)橹埂?/p>

題難不難？不難！繼續(xù)挑戰(zhàn)一下！難！知道難，就更要繼續(xù)了！

14. 什么是閉包？閉包的作用是什么？閉包有哪些使用場(chǎng)景？

閉包是指有權(quán)訪(fǎng)問(wèn)另一個(gè)函數(shù)作用域中的變量的函數(shù)，創(chuàng)建閉包最常用的方式就是在一個(gè)函數(shù)內(nèi)部創(chuàng)建另一個(gè)函數(shù)。

閉包的作用有:

封裝私有變量

模仿塊級(jí)作用域(ES5中沒(méi)有塊級(jí)作用域)

實(shí)現(xiàn)JS的模塊

call 和 apply 的功能相同，區(qū)別在于傳參的方式不一樣:

fn.call(obj, arg1, arg2, ...),調(diào)用一個(gè)函數(shù), 具有一個(gè)指定的this值和分別地提供的參數(shù)(參數(shù)的列表)。

fn.apply(obj, [argsArray]),調(diào)用一個(gè)函數(shù)，具有一個(gè)指定的this值，以及作為一個(gè)數(shù)組（或類(lèi)數(shù)組對(duì)象）提供的參數(shù)。

call核心:

將函數(shù)設(shè)為傳入?yún)?shù)的屬性

指定this到函數(shù)并傳入給定參數(shù)執(zhí)行函數(shù)

如果不傳入?yún)?shù)或者參數(shù)為null，默認(rèn)指向?yàn)?window / global

刪除參數(shù)上的函數(shù)

Function.prototype.call = function (context) {
    /** 如果第一個(gè)參數(shù)傳入的是 null 或者是 undefined, 那么指向this指向 window/global */
    /** 如果第一個(gè)參數(shù)傳入的不是null或者是undefined, 那么必須是一個(gè)對(duì)象 */
    if (!context) {
        //context為null或者是undefined
        context = typeof window === "undefined" ");window;
    }
    context.fn = this; //this指向的是當(dāng)前的函數(shù)(Function的實(shí)例)
    let rest = [...arguments].slice(1);//獲取除了this指向?qū)ο笠酝獾膮?shù), 空數(shù)組slice后返回的仍然是空數(shù)組
    let result = context.fn(...rest); //隱式綁定,當(dāng)前函數(shù)的this指向了context.
    delete context.fn;
    return result;
}

//測(cè)試代碼
var foo = {
    name: "Selina"
}
var name = "Chirs";
function bar(job, age) {
    console.log(this.name);
    console.log(job, age);
}
bar.call(foo, "programmer", 20);
// Selina programmer 20
bar.call(null, "teacher", 25);
// 瀏覽器環(huán)境: Chirs teacher 25; node 環(huán)境: undefined teacher 25

apply:

apply的實(shí)現(xiàn)和call很類(lèi)似，但是需要注意他們的參數(shù)是不一樣的，apply的第二個(gè)參數(shù)是數(shù)組或類(lèi)數(shù)組.

Function.prototype.apply = function (context, rest) {
    if (!context) {
        //context為null或者是undefined時(shí),設(shè)置默認(rèn)值
        context = typeof window === "undefined" ");window;
    }
    context.fn = this;
    let result;
    if(rest === undefined || rest === null) {
        //undefined 或者 是 null 不是 Iterator 對(duì)象，不能被 ...
        result = context.fn(rest);
    }else if(typeof rest === "object") {
        result = context.fn(...rest);
    }
    delete context.fn;
    return result;
}
var foo = {
    name: "Selina"
}
var name = "Chirs";
function bar(job, age) {
    console.log(this.name);
    console.log(job, age);
}
bar.apply(foo, ["programmer", 20]);
// Selina programmer 20
bar.apply(null, ["teacher", 25]);
// 瀏覽器環(huán)境: Chirs programmer 20; node 環(huán)境: undefined teacher 25

bind

bind 和 call/apply 有一個(gè)很重要的區(qū)別，一個(gè)函數(shù)被 call/apply 的時(shí)候，會(huì)直接調(diào)用，但是 bind 會(huì)創(chuàng)建一個(gè)新函數(shù)。當(dāng)這個(gè)新函數(shù)被調(diào)用時(shí)，bind() 的第一個(gè)參數(shù)將作為它運(yùn)行時(shí)的 this，之后的一序列參數(shù)將會(huì)在傳遞的實(shí)參前傳入作為它的參數(shù)。

Function.prototype.bind = function(context) {
    if(typeof this !== "function"){
       throw new TypeError("not a function");
    }
    let self = this;
    let args = [...arguments].slice(1);
    function Fn() {};
    Fn.prototype = this.prototype;
    let bound = function() {
        let res = [...args, ...arguments]; //bind傳遞的參數(shù)和函數(shù)調(diào)用時(shí)傳遞的參數(shù)拼接
        context = this instanceof Fn ");this : context || this;
        return self.apply(context, res);
    }
    //原型鏈
    bound.prototype = new Fn();
    return bound;
}

var name = "Jack";
function person(age, job, gender){
    console.log(this.name , age, job, gender);
}
var Yve = {name : "Yvette"};
let result = person.bind(Yve, 22, "enginner")("female");	

new:

創(chuàng)建一個(gè)新對(duì)象。

這個(gè)新對(duì)象會(huì)被執(zhí)行[[原型]]連接。

屬性和方法被加入到 this 引用的對(duì)象中。并執(zhí)行了構(gòu)造函數(shù)中的方法.

如果函數(shù)沒(méi)有返回其他對(duì)象，那么this指向這個(gè)新對(duì)象，否則this指向構(gòu)造函數(shù)中返回的對(duì)象。

function new(func) {
    let target = {};
    target.__proto__ = func.prototype;
    let res = func.call(target);
    if (res && typeof(res) == "object" || typeof(res) == "function") {
    	return res;
    }
    return target;
}

字面量創(chuàng)建對(duì)象，不會(huì)調(diào)用 Object構(gòu)造函數(shù), 簡(jiǎn)潔且性能更好;

new Object() 方式創(chuàng)建對(duì)象本質(zhì)上是方法調(diào)用，涉及到在proto鏈中遍歷該方法，當(dāng)找到該方法后，又會(huì)生產(chǎn)方法調(diào)用必須的 堆棧信息，方法調(diào)用結(jié)束后，還要釋放該堆棧，性能不如字面量的方式。

通過(guò)對(duì)象字面量定義對(duì)象時(shí)，不會(huì)調(diào)用Object構(gòu)造函數(shù)。

在 JavaScript 中，每當(dāng)定義一個(gè)對(duì)象（函數(shù)也是對(duì)象）時(shí)候，對(duì)象中都會(huì)包含一些預(yù)定義的屬性。其中每個(gè)函數(shù)對(duì)象都有一個(gè)prototype 屬性，這個(gè)屬性指向函數(shù)的原型對(duì)象。使用原型對(duì)象的好處是所有對(duì)象實(shí)例共享它所包含的屬性和方法。

原型鏈解決的主要是繼承問(wèn)題。

每個(gè)對(duì)象擁有一個(gè)原型對(duì)象，通過(guò) proto (讀音: dunder proto) 指針指向其原型對(duì)象，并從中繼承方法和屬性，同時(shí)原型對(duì)象也可能擁有原型，這樣一層一層，最終指向 null(Object.proptotype.__proto__ 指向的是null)。這種關(guān)系被稱(chēng)為原型鏈 (prototype chain)，通過(guò)原型鏈一個(gè)對(duì)象可以擁有定義在其他對(duì)象中的屬性和方法。

構(gòu)造函數(shù) Parent、Parent.prototype 和 實(shí)例 p 的關(guān)系如下:(p.__proto__ === Parent.prototype)

prototype是構(gòu)造函數(shù)的屬性。

__proto__ 是每個(gè)實(shí)例都有的屬性，可以訪(fǎng)問(wèn) [[prototype]] 屬性。

實(shí)例的__proto__ 與其構(gòu)造函數(shù)的prototype指向的是同一個(gè)對(duì)象。

function Student(name) {
    this.name = name;
}
Student.prototype.setAge = function(){
    this.age=20;
}
let Jack = new Student("jack");
console.log(Jack.__proto__);
//console.log(Object.getPrototypeOf(Jack));;
console.log(Student.prototype);
console.log(Jack.__proto__ === Student.prototype);//true

組合繼承(最常用的繼承方式)

function SuperType(name) {
    this.name = name;
    this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function() {
    console.log(this.name);
}

function SubType(name, age) {
    SuperType.call(this, name);
    this.age = age;
}
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;

SubType.prototype.sayAge = function() {
    console.log(this.age);
}

其它繼承方式實(shí)現(xiàn)，可以參考《JavaScript高級(jí)程序設(shè)計(jì)》

淺拷貝是指只復(fù)制第一層對(duì)象，但是當(dāng)對(duì)象的屬性是引用類(lèi)型時(shí)，實(shí)質(zhì)復(fù)制的是其引用，當(dāng)引用指向的值改變時(shí)也會(huì)跟著變化。

深拷貝復(fù)制變量值，對(duì)于非基本類(lèi)型的變量，則遞歸至基本類(lèi)型變量后，再?gòu)?fù)制。深拷貝后的對(duì)象與原來(lái)的對(duì)象是完全隔離的，互不影響，對(duì)一個(gè)對(duì)象的修改并不會(huì)影響另一個(gè)對(duì)象。

實(shí)現(xiàn)一個(gè)深拷貝:

function deepClone(obj) { //遞歸拷貝
    if(obj === null) return null; //null 的情況
    if(obj instanceof RegExp) return new RegExp(obj);
    if(obj instanceof Date) return new Date(obj);
    if(typeof obj !== "object") {
        //如果不是復(fù)雜數(shù)據(jù)類(lèi)型，直接返回
        return obj;
    }
    /**
     * 如果obj是數(shù)組，那么 obj.constructor 是 [Function: Array]
     * 如果obj是對(duì)象，那么 obj.constructor 是 [Function: Object]
     */
    let t = new obj.constructor();
    for(let key in obj) {
        //如果 obj[key] 是復(fù)雜數(shù)據(jù)類(lèi)型，遞歸
        t[key] = deepClone(obj[key]);
    }
    return t;
}

看不下去了？別人的送分題會(huì)成為你的送命題

22. 防抖和節(jié)流的區(qū)別是什么？防抖和節(jié)流的實(shí)現(xiàn)。

防抖和節(jié)流的作用都是防止函數(shù)多次調(diào)用。區(qū)別在于，假設(shè)一個(gè)用戶(hù)一直觸發(fā)這個(gè)函數(shù)，且每次觸發(fā)函數(shù)的間隔小于設(shè)置的時(shí)間，防抖的情況下只會(huì)調(diào)用一次，而節(jié)流的情況會(huì)每隔一定時(shí)間調(diào)用一次函數(shù)。

防抖(debounce): n秒內(nèi)函數(shù)只會(huì)執(zhí)行一次，如果n秒內(nèi)高頻事件再次被觸發(fā)，則重新計(jì)算時(shí)間

function debounce(func, wait, immediate=true) {
    let timeout, context, args;
        // 延遲執(zhí)行函數(shù)
        const later = () => setTimeout(() => {
            // 延遲函數(shù)執(zhí)行完畢，清空定時(shí)器
            timeout = null
            // 延遲執(zhí)行的情況下，函數(shù)會(huì)在延遲函數(shù)中執(zhí)行
            // 使用到之前緩存的參數(shù)和上下文
            if (!immediate) {
                func.apply(context, args);
                context = args = null;
            }
        }, wait);
        let debounced = function (...params) {
            if (!timeout) {
                timeout = later();
                if (immediate) {
                    //立即執(zhí)行
                    func.apply(this, params);
                } else {
                    //閉包
                    context = this;
                    args = params;
                }
            } else {
                clearTimeout(timeout);
                timeout = later();
            }
        }
    debounced.cancel = function () {
        clearTimeout(timeout);
        timeout = null;
    };
    return debounced;
};

防抖的應(yīng)用場(chǎng)景:

每次 resize/scroll 觸發(fā)統(tǒng)計(jì)事件

文本輸入的驗(yàn)證（連續(xù)輸入文字后發(fā)送 AJAX 請(qǐng)求進(jìn)行驗(yàn)證，驗(yàn)證一次就好）

節(jié)流(throttle): 高頻事件在規(guī)定時(shí)間內(nèi)只會(huì)執(zhí)行一次，執(zhí)行一次后，只有大于設(shè)定的執(zhí)行周期后才會(huì)執(zhí)行第二次。

//underscore.js
function throttle(func, wait, options) {
    var timeout, context, args, result;
    var previous = 0;
    if (!options) options = {};

    var later = function () {
        previous = options.leading === false ");0 : Date.now() || new Date().getTime();
        timeout = null;
        result = func.apply(context, args);
        if (!timeout) context = args = null;
    };

    var throttled = function () {
        var now = Date.now() || new Date().getTime();
        if (!previous && options.leading === false) previous = now;
        var remaining = wait - (now - previous);
        context = this;
        args = arguments;
        if (remaining <= 0 || remaining > wait) {
            if (timeout) {
                clearTimeout(timeout);
                timeout = null;
            }
            previous = now;
            result = func.apply(context, args);
            if (!timeout) context = args = null;
        } else if (!timeout && options.trailing !== false) {
            // 判斷是否設(shè)置了定時(shí)器和 trailing
            timeout = setTimeout(later, remaining);
        }
        return result;
    };

    throttled.cancel = function () {
        clearTimeout(timeout);
        previous = 0;
        timeout = context = args = null;
    };

    return throttled;
};

函數(shù)節(jié)流的應(yīng)用場(chǎng)景有:

DOM 元素的拖拽功能實(shí)現(xiàn)（mousemove）

射擊游戲的 mousedown/keydown 事件（單位時(shí)間只能發(fā)射一顆子彈）

計(jì)算鼠標(biāo)移動(dòng)的距離（mousemove）

Canvas 模擬畫(huà)板功能（mousemove）

搜索聯(lián)想（keyup）

監(jiān)聽(tīng)滾動(dòng)事件判斷是否到頁(yè)面底部自動(dòng)加載更多：給 scroll 加了 debounce 后，只有用戶(hù)停止?jié)L動(dòng)后，才會(huì)判斷是否到了頁(yè)面底部；如果是 throttle 的話(huà)，只要頁(yè)面滾動(dòng)就會(huì)間隔一段時(shí)間判斷一次

// ES5 的寫(xiě)法
Math.max.apply(null, [14, 3, 77, 30]);

// ES6 的寫(xiě)法
Math.max(...[14, 3, 77, 30]);

// reduce
[14,3,77,30].reduce((accumulator, currentValue)=>{
    return accumulator = accumulator > currentValue ");

新增了塊級(jí)作用域(let,const)

提供了定義類(lèi)的語(yǔ)法糖(class)

新增了一種基本數(shù)據(jù)類(lèi)型(Symbol)

新增了變量的解構(gòu)賦值

函數(shù)參數(shù)允許設(shè)置默認(rèn)值，引入了rest參數(shù)，新增了箭頭函數(shù)

數(shù)組新增了一些API，如 isArray / from / of 方法;數(shù)組實(shí)例新增了 entries()，keys() 和 values() 等方法

對(duì)象和數(shù)組新增了擴(kuò)展運(yùn)算符

ES6 新增了模塊化(import/export)

ES6 新增了 Set 和 Map 數(shù)據(jù)結(jié)構(gòu)

ES6 原生提供 Proxy 構(gòu)造函數(shù)，用來(lái)生成 Proxy 實(shí)例

ES6 新增了生成器(Generator)和遍歷器(Iterator)

setTimeout() 只是將事件插入了“任務(wù)隊(duì)列”，必須等當(dāng)前代碼（執(zhí)行棧）執(zhí)行完，主線(xiàn)程才會(huì)去執(zhí)行它指定的回調(diào)函數(shù)。要是當(dāng)前代碼消耗時(shí)間很長(zhǎng)，也有可能要等很久，所以并沒(méi)辦法保證回調(diào)函數(shù)一定會(huì)在 setTimeout() 指定的時(shí)間執(zhí)行。所以， setTimeout() 的第二個(gè)參數(shù)表示的是最少時(shí)間，并非是確切時(shí)間。

HTML5標(biāo)準(zhǔn)規(guī)定了 setTimeout() 的第二個(gè)參數(shù)的最小值不得小于4毫秒，如果低于這個(gè)值，則默認(rèn)是4毫秒。在此之前。老版本的瀏覽器都將最短時(shí)間設(shè)為10毫秒。另外，對(duì)于那些DOM的變動(dòng)（尤其是涉及頁(yè)面重新渲染的部分），通常是間隔16毫秒執(zhí)行。這時(shí)使用 requestAnimationFrame() 的效果要好于 setTimeout();

1.進(jìn)制轉(zhuǎn)換

0.1 -> 0.0001100110011001...(無(wú)限循環(huán))
0.2 -> 0.0011001100110011...(無(wú)限循環(huán))

2.對(duì)階運(yùn)算

Promise 的優(yōu)點(diǎn):

Promise 的缺點(diǎn):

Promise.all = function (promises) {
    return new Promise((resolve, reject) => {
        let index = 0;
        let result = [];
        if (promises.length === 0) {
            resolve(result);
        } else {
            function processValue(i, data) {
                result[i] = data;
                if (++index === promises.length) {
                    resolve(result);
                }
            }
            for (let i = 0; i < promises.length; i++) {
                //promises[i] 可能是普通值
                Promise.resolve(promises[i]).then((data) => {
                    processValue(i, data);
                }, (err) => {
                    reject(err);
                    return;
                });
            }
        }
    });
}

Promise.prototype.finally = function (callback) {
    return this.then((value) => {
        return Promise.resolve(callback()).then(() => {
            return value;
        });
    }, (err) => {
        return Promise.resolve(callback()).then(() => {
            throw err;
        });
    });
}

function sum(a) {
    return function(b) {
        return function(c) {
            return a+b+c;
        }
    }
}
console.log(sum(1)(2)(3)); // 6

function curry(fn, args = []) {
    return function(){
        let rest = [...args, ...arguments];
        if (rest.length < fn.length) {
            return curry.call(this,fn,rest);
        }else{
            return fn.apply(this,rest);
        }
    }
}
//test
function sum(a,b,c) {
    return a+b+c;
}
let sumFn = curry(sum);
console.log(sumFn(1)(2)(3)); //6
console.log(sumFn(1)(2, 3)); //6

 后續(xù)寫(xiě)作計(jì)劃

參考文章:

關(guān)注小姐姐的公眾號(hào)，和小姐姐一起學(xué)前端。