到底什么是this?
假设我们有一个对象小明,我们要求他三科成绩的总和。
var xiaomin={
shuxue : 50,
yuwen : 89,
yingyu : 20
}
function sum(o){
return o.shuxue+o.yuwen+o.yingyu
}
var a = sum(xiaomin);
console.log(a); //159
东西很简单,但是有一个问题,这里的函数和对象是一个什么关系。不用很复杂。
这里的对象是作为参数传入函数的,那么问题来了。
那么有没有其他的方法可以不用参数就可以让函数从外部获取到这个信息?
答案就是常说的 上下文
所以上下文就是使信息进入函数内部的一种手段
我们就可以修改上面的写法了
var xiaomin={
shuxue : 50,
yuwen : 89,
yingyu : 20,
sum:sum
}
function sum(){
alert("1");
return this.shuxue+this.yuwen+this.yingyu
}
var a = xiaomin.sum();
console.log(a); //159
这就是将函数绑定在 xiaomin
的上下文中,通过 this
这个东西访问函数的信息。
所以 this 就是函数的上下文,也是除了传参之外,最常见的使信息进入函数内部的手段。
this怎么判断?
最重要的一句话 function定义的函数,this是什么。看的是怎么调用,而不是看怎么定义。
调动方式决定了this。
var xiaomin={
shuxue : 50,
yuwen : 89,
yingyu : 20,
sum:sum
}
function sum(){
console.log(this);
return this.shuxue+this.yuwen+this.yingyu
}
var a = xiaomin.sum;
a();
//打印出来的是window。
//所以看到不要着急慢慢分析。
-
函数直接加圆括号运行了。上下文就是window。
eg: fn() 上下文 window
-
对象打点调用函数,上下文就是obj这个对象.
eg: obj.fn() 上下文 obj -
类数组对象,或者数组中枚举出函数来运行,上下文对象就是这个类数组对象
arr[idx] () 上下文 arr
funciton fun1(fn){
arguments[0](3,4);
}
function fun2(){
console.log(this.length);
}
fun1(fun2,5,6,7,8) //弹出5
//因为this在调用的时候是通过数组进行调用所以this指向的是那个数组,和他本身入参没有关系
//本身入参直接arguments对象直接调用就可以
- 定时器调用函数,上下文也是window
- 被当做事件处理函数,上下文是触发事件的 DOM 元素
- 用new 调用函数,上下文就是函数体内秘密创建的空白对象 (new 调用 ,1.创建空对象 2.绑定this 3.执行语句 4.返回这个对象)
function cat(){
this.a = 2;
return 3;
}
var b = new cat();
cnosole.log(b); // 返回值就是cat这个对象有一个 a 属性 值为2。
- apply和call可以指定上下文,区别就是传参方式不一样