谁最终调用函数,this指向谁!!!

① this指向的,永远只可能是对象!
   ② this指向谁,永远不取决于this写在哪!而是取决于函数在哪调用。
   ③ this指向的对象,我们称之为函数的上下文context,也叫函数的调用者。

下面,请看具体情况。

  ① 通过函数名()直接调用:this指向window

function func(){
console.log(this);
} //① 通过函数名()直接调用:this指向window
func(); // this--->window

② 通过对象.函数名()调用的:this指向这个对象


//② 通过对象.函数名()调用的:this指向这个对象
// 狭义对象
var obj = {
name:"obj",
func1 :func
};
obj.func1(); // this--->obj // 广义对象
document.getElementById("div").onclick = function(){
this.style.backgroundColor = "red";
}; // this--->div

③ 函数作为数组的一个元素,通过数组下标调用的:this指向这个数组

function func(){
console.log(this);
} //③ 函数作为数组的一个元素,通过数组下标调用的:this指向这个数组
var arr = [func,1,2,3];
arr[0](); // this--->arr

④ 函数作为window内置函数的回调函数调用:this指向window( setInterval setTimeout 等

function func(){
console.log(this);
} //④ 函数作为window内置函数的回调函数调用:this指向window
setTimeout(func,1000);// this--->window
//setInterval(func,1000);

⑤ 函数作为构造函数,用new关键字调用时:this指向新new出的对象

function func(){
console.log(this);
} //⑤ 函数作为构造函数,用new关键字调用时:this指向新new出的对象
var obj = new func(); //this--->new出的新obj

例题:

例1:

function f1(){
var user = '二狗子';
alert(this.user); //undefined
alert(this); //object window
}
f1(); //实际上就是 window.f1();

这里调用方法f1的是window对象,也就是说this指向window对象,所以会出现this.user 为undefined

例2:

var a = {
user: '二狗子',
f1: function () {
alert(this.user);
}
}
a.f1(); //二狗子
这里调用方法f1的是对象a,就是说this指向a对象,所以this.user为a对象里面的“二狗子”

接下来朝深处看看

例3:

var a = {
user: '二狗子',
f1: function () {
alert(this.user);
}
}
window.a.f1(); //二狗子
这段代码跟例2 比就是多了个window. 结果还是一样的,想说明什么问题呢,看下段代码 var a = {
user: '二狗子',
b: {
user: '大傻子',
f1: function () {
alert(this.user);
}
}
}
a.b.f1(); //大傻子

看见没,结果变成“大傻子”了,对比两段代码再结合最上面说的this指向调用它的对象,

也就表名第一段代码是对象a调用的方法f1,第二段代码是对象b调用的,得出结论:在这种链式情况下,

this指向的是它上一级的对象。可能表达的不太准确,反正就是那个意思。

再把b对象里面的user注释掉看看

var a = {
user: '二狗子',
b: {
//user: '大傻子',
f1: function () {
alert(this.user);
}
}
}
a.b.f1(); //undefined

这里的this应该是指向b对象的,但是b里面没有user啊,肯定就是undefined,

通过this就把指代的对象给定死了,反正this就是指的b,我不管你里面有没有这个user,

没有就返回undefined,我可不会去拿a的user,

千万别与链式作用域搞混了,像下面这样

var user = '大傻子';
function f1(){
var user = '二狗子';
alert(user); //二狗子
}
f1(); function f2(){
alert(user); //大傻子
}
f2();

睁大眼看清楚了,这里没有this啊,所以执行f1的时候直接就是f1里面的user “二狗子”,执行f2的时候因为f2里面没有user,所以就朝外找,找到了外面的user "大傻子"

不能再多说了,待会该迷糊了。

再加个例子吧

例4:

function f1(){
this.user = "二狗子";
}
var a = new f1();
alert(a.user); //二狗子

其实就是new 关键字可以改变this的指向,通过new关键字,把一个对象实例给了a,同时this的指向也变成了a对象。

随机推荐

  1. Quartz.Net—TriggerBuilder

    TriggerBuilder TriggerBuilder是一个建造者模式,链式建造.通过静态方法构建一个TriggerBuilder实例,然后再调用类方法Build()创建一个ITrigger的实现 ...

  2. Red Hat操作系统的安装

    1.双击打开VMware虚拟机 2.以下是打开后的界面,点击“创建新的虚拟机” 3.出现新建虚拟机的导向,选择“自定义” 3.选择虚拟机硬件兼容性,使用默认Workstation 12.0就可以 4. ...

  3. 小程序的目录结构/配置介绍/视图层wxml数据绑定/双线程模型/小程序的启动流程

    安装好微信小程序开发软件,创建项目 小程序文件结构和传统web对比 结构 传统web 微信小程序 结构 HTML WXML 样式 CSS WXSS 逻辑 Javascript Javascript 配 ...

  4. RabbitMQ 应用一

    (百度百科)MQ全称为Message Queue,消息队列(MQ)是一种应用程序对应用程序的通信方法.应用程序通过读写出入队列的消息(针对应用程序的数据)来通信,而无需专用连接来链接它们.消息传递指的 ...

  5. Python之算法模型-5.1

    一.这里学习的算法模型包含监督学习和非监督学习两个方式的算法. 其中监督学习的主要算法分为(分类算法,回归算法),无监督学习(聚类算法),这里的几种算法,主要是学习他们用来做预测的效果和具体的使用方式 ...

  6. 解读生命密码的基本手段 ——DNA测序技术的前世今生

    解读生命密码的基本手段 ——DNA测序技术的前世今生 任鲁风  于军 (中国科学院基因组科学及信息重点实验室,北京基因组研究所) DNA(脱氧核糖核酸)和RNA(核糖核酸)是生命体的两种最基本组成物质 ...

  7. Django2.0 分页的应用

    #分页例子from django.core.paginator import Paginatordef blog_list(request):      blog_all_list = models. ...

  8. Saas软件更新以及小程序更新的教训

    Saas软件即使版本更新多次,也要兼顾老客户,兼容旧功能. 对于小程序调用的接口,无法保证客户会更新小程序,因此需要兼容使用旧版本小程序的客户,更不能删除接口.

  9. VBA循环(十一)

    当需要多次执行一段代码时,就可以使用循环语句. 一般来说,语句是按顺序执行的:函数中的第一个语句首先执行,然后是第二个,依此类推. 编程语言提供了各种控制结构,允许更复杂的执行路径. 循环语句允许多次 ...

  10. PX4/Pixhawk uORB

    PX4/Pixhawk的软件体系结构主要被分为四个层次 应用程序的API:这个接口提供给应用程序开发人员,此API旨在尽可能的精简.扁平及隐藏其复杂性 应用程序框架:这是为操作基础飞行控制的默认程序集 ...