undefined
window
this => window
function fn(){
console.log(this);
// 此时 this 指向 window
}
fn();
// 相当于 window.fn()
this => 调用者
var obj = {
fn:function(){
console.log(this);
}
}
obj.fn();
// 此时 this 指向 obj
this => window
setTimeout(function(){
console.log(this);
},0)
// 此时定时器处理函数里面的this 指向 window
this => 事件源
div.onclick = function(){
console.log(this);
}
//当你点击 div 的时候,this指向 div
this => window
(function () {
console.log(this)
})()
// 此时 this 指向 window
刚才我们说过的都是函数的基本调用方式里面的 this 指向,我们还有三个方法可以忽略函数本身的 this 指向转而指向别的地方。这三个方法就是 call / apply / bind,是强行改变 this 指向的方法。
call/apply/bind
附加在函数调用后面使用,可以忽略函数本身的 this 指向call和apply
使用时会立即自动调用函数,bind
使用时会创建一个函数,但是需要另外去手动调用fn.call(fn 函数体内 this 的指向哪里,arg1, arg2, ...);
使用 call 方法不传参
var num = 666;
function fn() {
console.log('num = ', this.num);
}
fn.call(); // num = 666
使用 call 方法指定this
var name = 'Rose';
var obj = {
name:'Jack'};
function fn(){
console.log(this.name);
}
fn(); // Rose
fn.call(); // Rose
fn.call(obj); // jack
使用 call 方法指定this并传参
var name = 'Rack';
var obj = {
name:'Jack'};
function fn(a,b){
console.log(this,a,b);
}
fn(1,2); // window 1 2
fn.call(obj,1,2); // obj 1 2
fn(1,3); // window 1 3
apply
方法接受的是一个包含多个参数的数组fn.apply(fn 函数体内 this 的指向哪里,[arg1, arg2, ...]);
var obj = {
name:'jack'};
function fn(a,b){
console.log(this,a,b);
}
fn(1,2); // window 1 2
fn.apply(obj,[1,2]); // obj 1 2
使用 apply 合并数组
push
将元素追加到数组中,如果参数是数组,它会将该数组作为单个元素添加,而不是将这个数组内的每个元素添加进去,因此我们最终会得到一个数组内的数组var arr1 = [1,2];
var arr2 = [3,4];
arr1.push(arr2);
console.log(arr1); // [1,2,[3,4]]
concat
虽然可以合并数组,但它并不是将元素添加到现有数组,而是创建并返回一个新数组。var arr1 = [1,2];
var arr2 = [3,4];
var arr3 = arr1.concat(arr2);
console.log(arr1); // [1,2]
console.log(arr3); // [1,2,3,4]
apply
就派上用场了var arr1 = [1,2];
var arr2 = [3,4];
arr1.push.apply(arr1,arr2);
console.log(arr1); // [1,2,3,4]
使用 apply 与内置函数连用
/* 找出数组中最大/小的数字 */
var numbers = [5, 6, 2, 3, 7];
var max = Math.max(numbers)
var min = Math.min(numbers)
console.log(min,max); // NaN NaN
var max = Math.max.apply(null, numbers);
/* 基本等同于 Math.max(numbers[0], ...) 或 Math.max(5, 6, ..) */
var min = Math.min.apply(null, numbers);
console.log(min,max); // 2 7
fn.bind(fn 函数体内 this 的指向, arg1, arg2, ...);
var obj = {
name:'jack'};
function fn(a,b){
console.log(this,a,b);
}
fn(1,2); // window 1 2
fn.bind(obj,1,2); // 未调用不执行
fn.bind(obj,1,3)() // obj 1 3
var newFn = fn.bind(obj,3,4);
newFn(); // obj 1 4
newFn(5,6); // obj 3 4