一次搞懂前端this、闭包、作用域

闭包的应用

闭包是指有权访问另外一个函数作用域中的变量的函数.可以理解为(能够读取其他函数内部变量的函数)

0. 封装私有变量

function Person0() {
    this._attackVolume = 100;
}
Person0.prototype = {
    /** ... **/
};
var p0 = new Person0(); console.log(p0._attackVolume); // 100

// 工厂方法
function Person1() {
    var _attackVolume = 100;
    return {
        attack() {
            console.log('attack ' + _attackVolume);
            _attackVolume++
        }
    };
}
var p1 = new Person1(); console.log(p1._attackVolume); // undefined
p1.attack() // attack 101
p1.attack() // attack 100

1. 储存变量(缓存)

function getListDataManager() {
    let localData = null;
    return {
        getData() {
            if (localData) {
                return Promise.resolve(localData); // 返回的是储存的结果
            }
            return fetch('xxxx').then(data => localData = data.json()); // 真实的数据请求
        }
    };
}

2. 防抖节流函数的实现

例子参考：解析几个JS手写函数（call、防抖节流）

this的5种场景

0. 函数直接调用

function myfunc() {
    console.log(this)
}
myfunc(); // this是window, 严格模式下是undefined

逗号表达式情况:

var obj = {
    show: function () {
        console.log('this:', this);
    }
};
(0, obj.show)(); // window
// 等于 var re = function () { console.lo... } ; re();

1. 函数被别人调用时

function myfunc() {
    console.log(this)
}
var a = {
    myfunc: myfunc
};
a.myfunc(); // this是对象a

看似调用的形式，实则直接调用的情况:

function run() {
    console.log(this);
}
var obj = {
    test: function () {
        run()
    }
}
obj.test() // 这里this是window

谁调用this就是谁:

var obj = {
    sub: {
        show: function () {
            console.log('this:', this);
        }
    }
};
obj.sub.show() // this为对象sub

2. new创建实例时

function Person(name) {
    this.name = name;
    console.log(this);
}

var p = new Person('name'); // p

var obj = {
    show: function () {
        console.log('this:', this);
    }
};
var newobj = new obj.show(); // newobj

new > bind > 调用

var obj = {
    show: function () {
        console.log('\nthis:\n\n', this);
    }
};
obj.show(); // obj
(obj.show.bind(obj))(); // obj
var newobj = new (obj.show.bind(obj))(); // newobj

3. apply、call、bind时

一般bind要优与call/apply。（call参数多，apply参数少）

function getColor(color) {
    this.color = color;
    console.log(this);
}
function Car(name, color) {
    this.name = name; // this指的是实例car
    console.log(this)
    getColor.call(this, color); // 这里的this从原本的getColor，变成了car
}
var car = new Car('卡⻋', '绿色');

4. 箭头函数

没有自己的this，也不能被new关键字调用

var a = {
    myfunc: function () {
        setTimeout(() => {
            console.log(this);
        }, 0)
    },
    myfunc2: function () {
        setTimeout(function() {
            console.log(this);
        }, 0)
    }
};
a.myfunc(); // this是a
a.myfunc2(); // this是setTimeout

5. 综合应用

var obj = {
    show: function () {
        console.log('this:', this);
    }
};
var elem = document.getElementById('xxx');
elem.addEventListener('click', obj.show); // 传递给了click事件，执行时相当于直接调用，this指window
elem.addEventListener('click', obj.show.bind(obj)); // 显式绑定了obj，this指obj
elem.addEventListener('click', function () {
    obj.show(); // 执行是调用出来的，this指obj
});

作用域

for (var i = 0; i < 10; i++) {
    console.log(i); // 0 1 2 .... 9
}
for (var i = 0; i < 10; i++) {
    setTimeout(function () { // 时间循环，进入异步队列，调用时主栈for已执行完，i的值为10
        console.log(i); // 10
    }, 0);
}
for (var i = 0; i < 10; i++) {
    (function (i) { // 独立的10个作用域块了
        setTimeout(function () {
            console.log(i); // 0 1 2 3 .... 9
        }, 0)
    })(i);
}
for (let i = 0; i < 10; i++) {
    console.log(i); // 0 1 2 3 .... 9
}

被js变量提升影响:

var person = 1;
function showPerson() {
    console.log(person); // 如果没有var定义的person那么输出是1
    var person = 2; // 变量提升：函数showPerson作用域内person被提前声明初始化并赋值undefind
}
showPerson(); // undefined

被js函数提升影响:

var person = 1;
function showPerson() {
    console.log(person);
    var person = 2; // 在函数作用域内任何地方定义此person均不会影响结果
    function person() { } // 函数提升：提前声明初始化并赋值整个函数内容
}
showPerson(); // function person() { }

面向对象

function Person() {
    this.name = 1;
}
Person.prototype = {
    name: 2,
    show: function () {
        console.log('name is:', this.name);
    }
};

var person = new Person();
person.show(); // name is: 1
Person.prototype.show(); // name is: 2

Person.prototype.show = function () {
    console.log('new show');
};
person.show(); // new show