网站备案多少岁,郑州防疫办,濮阳网站建设兼职,网站建设 新手从总结#xff1a;谁调用我#xff0c;我就指向谁#xff08;es6箭头函数不算#xff09;
一、ES6之前 每一个函数内部都有一个关键字是 this #xff0c;可以直接使用 重点#xff1a; 函数内部的 this 只和函数的调用方式有关系#xff0c;和函数的定义方式没有关系 …总结谁调用我我就指向谁es6箭头函数不算
一、ES6之前 每一个函数内部都有一个关键字是 this 可以直接使用 重点 函数内部的 this 只和函数的调用方式有关系和函数的定义方式没有关系
1、 函数内部的 this 指向谁取决于函数的调用方式
1.1、全局定义的函数直接调用this window function fn() {console.log(this)}fn()// 此时 this 指向 window1.2、 对象内部的方法调用this 调用者
var obj {fn: function () {console.log(this)}
}
obj.fn()
// 此时 this 指向 obj1.3、 定时器的处理函数this window
setTimeout(function () {console.log(this)
}, 0)
// 此时定时器处理函数里面的 this 指向 window1.4、事件处理函数this 事件源
div.onclick function () {console.log(this)
}
// 当你点击 div 的时候this 指向 div1.5、自调用函数this window
(function () {console.log(this)
})()
// 此时 this 指向 window2、改变this指向
call 和 apply 和 bind
刚才我们说过的都是函数的基本调用方式里面的 this 指向我们还有三个可以忽略函数本身的 this 指向转而指向别的地方这三个方法就是 call / apply / bind是强行改变 this 指向的方法
call call 方法是附加在函数调用后面使用可以忽略函数本身的 this 指向 语法 函数名.call(要改变的 this 指向要给函数传递的参数1要给函数传递的参数2 ...) var obj { name: Jack }
function fn(a, b) {console.log(this)console.log(a)console.log(b)
}
fn(1, 2)
fn.call(obj, 1, 2)fn() 的时候函数内部的 this 指向 windowfn.call(obj, 1, 2) 的时候函数内部的 this 就指向了 obj 这个对象使用 call 方法的时候 会立即执行函数第一个参数是你要改变的函数内部的 this 指向第二个参数开始依次是向函数传递参数
apply apply 方法是附加在函数调用后面使用可以忽略函数本身的 this 指向 语法 函数名.apply(要改变的 this 指向[要给函数传递的参数1 要给函数传递的参数2 ...]) var obj { name: Jack }
function fn(a, b) {console.log(this)console.log(a)console.log(b)
}
fn(1, 2)
fn.apply(obj, [1, 2])fn() 的时候函数内部的 this 指向 windowfn.apply(obj, [1, 2]) 的时候函数内部的 this 就指向了 obj 这个对象使用 apply 方法的时候 会立即执行函数第一个参数是你要改变的函数内部的 this 指向第二个参数是一个 数组数组里面的每一项依次是向函数传递的参数
bind bind 方法是附加在函数调用后面使用可以忽略函数本身的 this 指向 和 call / apply 有一些不一样就是不会立即执行函数而是返回一个已经改变了 this 指向的函数 语法 var newFn 函数名.bind(要改变的 this 指向); newFn(传递参数) var obj { name: Jack }
function fn(a, b) {console.log(this)console.log(a)console.log(b)
}
fn(1, 2)
var newFn fn.bind(obj)
newFn(1, 2)bind 调用的时候不会执行 fn 这个函数而是返回一个新的函数这个新的函数就是一个改变了 this 指向以后的 fn 函数fn(1, 2) 的时候 this 指向 windownewFn(1, 2) 的时候执行的是一个和 fn 一摸一样的函数只不过里面的 this 指向改成了 obj
方法this 指向参数传递方式执行时机call指定逐个传递立即执行apply指定数组形式传递立即执行bind指定逐个传递可选返回新函数需手动调用
二、ES6之后的箭头函数
箭头函数内部没有 this箭头函数的 this 是上下文的 this
const input document.getElementById(input);
const btn document.getElementById(btn);const obj {value: Hello,printWithRegularFunction: function() {setTimeout(function() {console.log(普通函数:, this.value); // 这里的 this 指向全局对象window}, 1000);},printWithArrowFunction: function() {setTimeout(() {console.log(箭头函数:, this.value); // 这里的 this 指向 obj 对象}, 1000);}};btn.addEventListener(click, () {obj.value input.value; // 将输入框的值赋值给 obj.valueobj.printWithRegularFunction();obj.printWithArrowFunction();});运行结果
注意对象中的箭头函数
虽然箭头函数不能用于定义对象方法因为它没有自己的 this但可以在对象中定义箭头函数作为普通属性。
const obj {name: Alice,sayHello: () {console.log(Hello, ${this.name}); // 这里的 this 指向外层作用域}
};obj.sayHello(); // Hello, undefined注意箭头函数不适合用于对象方法因为它会丢失对对象 this 的绑定。
