发布时间:2024-08-09 12:01
调用方式 | this指向 |
---|---|
普通函数调用 | window |
构造函数调用 | 实例对象 原型对象里的方法也指向实例对象 |
对象方法调用 | 该方法所属对象 |
事件绑定方法 | 绑定事件对象 |
定时器函数 | window |
立即执行函数 | window |
总结来说:除了定时器、普通函数和立即执行函数this指向为window,其他都指向调用者
var o ={
name:\'mkbird\'
}
function fn(){
console.log(this);
}
fn() // 输出window
fn.call(o); // 调用fn并将fn的this指向o,输出对象o
// 所以es5很多时候在子类继承父类时会使用Father.call(this)来使用父类的属性,es6使用super()
// 同时call()在实现调用函数功能时,还能传入参数
var o ={
name:\'mkbird\'
}
function fn(a,b){
console.log(a+b);
}
fn.call(o,1,2); // 输出3
fun.apply(thisArg,[argsArray])
// apply主要利用它传入数组返回数字的特性解决数组中的问题
// 比如Math.max只支持传入数字,但是我们现在用的是数组
var arr = [1.2,3]
var max = Math.max.apply(null,arr)
console.log(max) // 3
//如果有函数不想立即调用,又想改变函数的内部指向,这时就用bind
var o ={
name:\'mkbird\'
}
function fn(){
}
var f =fn.bind(o)
f();
// 箭头函数是函数换了一种写法
(参数)=>{函数体}
箭头函数与普通函数最大的区别是,箭头函数不会绑定this,箭头函数中的this指向箭头函数定义区的this
注意:箭头函数没有剩余参数arguments,如果想保存剩余参数只能使用…
…可以将剩余参数以数组的形式存起来
let students = [\'zs\',\'ls\',\'ww\']
let [s1,...s2] = student;
console.log(s1); //\'zs\'
console.log(s2); //[\'ls\',\'ww\']