閉包
- 介紹：閉包指一個函數(shù)在創(chuàng)建時有權(quán)訪問和操作該自身函數(shù)以外的變量和函數(shù)時所創(chuàng)建的作用域。經(jīng)典的使用方法：
function fn (name) {
return function (value) {
console.log(`${name}: ${value}`)
}
}
var fn1 = fn('huang');
fn1('maxuan');
fn1('pawn');
- name變量即為函數(shù)fn1有權(quán)訪問自身以外的變量所在的作用域炼幔。
This
- 介紹：一個函數(shù)被創(chuàng)建時秋茫，會附帶兩個隱試變量，arguments和this乃秀。
argument保存著實參的類數(shù)組對象肛著。
this指的是調(diào)用函數(shù)時候的上下文，稱為函數(shù)上下文跺讯，可能理解為調(diào)用上下文更清晰點枢贿。 - 作用： this是動態(tài)改變的，在調(diào)用函數(shù)的時候被確定抬吟，他指向調(diào)用該函數(shù)的對象萨咕。可以利用這點去動態(tài)復(fù)用函數(shù)火本。
先看一下this在不同調(diào)用場景下的指向危队。
- 作為全局調(diào)用
function fn () {
console.log(this);
}
fn () // window
在嚴格模式下this的值為undefined，在非嚴格模式下this值會被轉(zhuǎn)換為window
- 作為對象屬性調(diào)用
var obj = {
fn: function () {
console.log(this);
}
}
obj.fn(); // obj
- 作為事件函數(shù)調(diào)用
function fn () {
console.log(this);
}
document.body.click = fn(); // body元素
- 用new操作符調(diào)用
function Person(name, age) {
this.name = name;
this.age = age;
}
var hmx = new Person('hmx', 18); // this為hmx對象
- 函數(shù)的上下文還可以是我們指定钙畔，使用call apply 和bind茫陆；
call: 第一個參數(shù)為要指定this對象，后面的參數(shù)會按順序傳給函數(shù)擎析。
var obj = {
name: 'pawn'
}
function fn (value) {
console.log(this.name); // pawn
console.log(value) // 123
}
fn.call(obj, 123);
apply：第一個參數(shù)也是要指定的this對象簿盅，第二個參數(shù)接收一個數(shù)組或類數(shù)組（arguments / nodeList）挥下，然后分解為數(shù)組的參數(shù)。
var obj = {
name: 'pawn'
}
function fn () {
console.log(this.name);
console.log(arguments[0]); // 1
console.log(arguments[1]); // []
console.log(arguments[2]); // {}
}
fn.apply(obj,[1, [], {}]);
bind:第一個參數(shù)為指定的this對象桨醋，后面的參數(shù)會按順序傳給函數(shù), 該方法會反回一個指定this值的函數(shù)棚瘟。
var obj = {
name: 'pawn'
}
function fn () {
console.log(this.name);
}
var fn1 = fn.bind(obj);
fn1(); // pawn
