谁最终调用函数,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. linux 给运行程序指定动态库路径

    1. 连接和运行时库文件搜索路径到设置 库文件在连接(静态库和共享 库)和运行(仅限于使用共享库的程序)时被使用,其搜索路径是在系统中进行设置的.一般 Linux 系统把 /lib 和 /usr/li ...

  2. vagrant root 登录虚拟机

    这个问题本来觉得是个特别简单的问题,昨天弄的时候折腾了半晚上.所以打算记录下过程,主要也被网上的各种信息误导了. 1 先看下我这vagrant配置信息 Vagrant.configure(" ...

  3. Scratch编程:绘制七色花(七)

    “ 上节课的内容全部掌握了吗?反复练习了没有,编程最好的学习方法就是练习.练习.再练习.一定要记得多动手.多动脑筋哦~~” 01 — 游戏介绍 绘制一朵美丽的七色花. 02 — 设计思路 使用画笔功能 ...

  4. jdk8新特性--使用lambda表达式的延迟执行特性优化性能

    使用lambda表达式的延迟加载特性对代码进行优化:

  5. springboot2.x配置druid sql监控

    后端接口响应慢,通常我们就需要优化代码和sql,如果项目中使用druid连接池,那么我们可以利用其提供的sql监控功能,来帮助我们快速定位慢sql已经sql执行次数等问题,springboot2之后, ...

  6. Pyhton模块和包

    一 模块 1.1 什么是模块? 常见的场景:一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀. 但其实import加载的模块分为四个通用类别: 1 使用pytho ...

  7. iOS - App上架流程(复习+已用xcode8)

    一.前言: 今天又要上架一款APP,顺便来复习一下APP上架流程 下面就来详细讲解一下具体流程步骤. 二.准备: 一个已付费的开发者账号(账号类型分为个人(Individual).公司(Company ...

  8. phpcms企业站的一些知识

    头header.html 尾footer.html 主页用index.html 列表页用list.html 单网页用page.html 内容页用show.html {template "co ...

  9. MD 使用 i5ting_toc 转换成 HTML

    MD 使用 i5ting_toc 转换成 HTML 本文作者:天析 作者邮箱:2200475850@qq.com 发布时间: Wed, 10 Jul 2019 13:59:00 +0800 前言 md ...

  10. 解决 google 浏览器记住密码导致输入框样式改变(变成淡黄色背景)

    直接在页面上使用css代码: input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill { -webkit ...