一、this是哪里
this
在英文中的含义是【这】。那么【这】是【哪】?
this
关键字一般存在于函数中,表示一个指针,指向了当前函数的执行对象。也叫当前函数的**【执行】上下文。**
- 注意**【执行】**这两个字,如果函数没有执行,那么
this
是没有内容的,只有当函数执行时,this
才被绑定了内容。
- 总结一句话:谁【执行】了
**this**
所在的函数,**this**
就是谁。
![image.png](https://img-blog.csdnimg.cn/img_convert/3b423112472ddb53a882dfdabce7a95d.png)
二、常见的this指向
2.1 默认绑定
- 当一个没有明确隶属对象的函数,被直接调用时。该函数内部的
this
指向window。
function fn(){
console.log(this.a);
}
var a = 10;
fn();
- 当然要注意,在ES5的严格模式下,没有明确隶属对象的函数在默认执行时,其内部的
this
指向undefined
。
2.2 隐式绑定
- 所谓隐式绑定,就是将没有明确隶属对象的函数,归属到某个对象,通过该对象执行函数。
此时函数内部的this指向该对象。
function fn(){
console.log(this.a);
}
var obj = {
a:10,
fn:fn
}
obj.fn();
- 隐式绑定会遇到隐式丢失的情况:
- 当对象的方法被变量引用时,如果该变量没有从属对象,通过该变量执行函数,那么this会丢失,捕获到window。
- 当对象的方法,作为回调函数,传入另一个函数内执行时,this会丢失,捕获到window。
function fn(){
console.log(this.a);
}
var a = 20;
var obj = {
a:10,
fn:fn
}
obj.fn();
var f = obj.fn;
f();
setTimeout(obj.fn, 100);
- 隐式丢失是可以被修复的,这就要使用下一种绑定方式:显示绑定
2.3 显示绑定
- 所谓显示绑定,就是使用函数的方法,如:
call
,apply
,bind
等,可以强制改变this的指向。
- 以
call
方法举例:
function fn(){
console.log(this.a);
}
var a = 20;
var obj = {
a:10
};
fn.call(obj);
function fn(){
console.log(this.a);
}
var a = 20;
var obj = {
a:10
};
fn.call(obj);
setTimeout(fn.bind(obj), 100);
- 注意:通过修复隐式绑定,我们发现,显示绑定 的优先级要高于 隐式绑定。
2.4 构造函数绑定
- 构造函数绑定,又叫
new
绑定,主要用于面向对象编程。
- 这里还需要掌握
new
关键字的原理:
- 创建一个新对象
- 将函数中的
this
指向这个新对象
- 将这个新对象的
__proto__
指向函数的prototype
- 检查函数中是否主动返回对象,如果没有,则返回前三步处理好的对象
function fn(){
this.a = 10;
}
var f = new fn();
console.log(f.a);
- 其实,只需要记住,凡是被
new
执行的函数,默认情况下,其内部的this
都被new
强行指向new
出来的对象,也叫实例。
三、函数的方法
- 语法:
fn.方法名()
- 方法名:
call
,apply
,bind
- 区别
- 共同点:使用第一个参数,修改
this
的指向
call
:可以支持从第二个参数向后,无数个参数,都会传入原函数作为参数
apply
:只支持两个参数,且第二个参数必须为数组,数组会自动解析,将解析出的数据,都会传入原函数作为参数
bind
:可以支持从第二个参数向后,无数个参数,都会传入原函数作为参数。
四、练习:
- 事件委托封装
- 下拉菜单
- 点击添加表格信息
- 自定义事件
相关文章:
call和apply的使用-基础篇
call和apply的使用-扩展篇
彻底搞懂javascript中的this的指向