this 总结
谁最终调用函数,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对象。
随机推荐
- zend framework多模块多Layout配置
转自: http://blog.csdn.net/a82168506/article/details/10228011 上次接触zend framework已经很久远了,10年的事情了.最近在做一个项 ...
- models模型层
ORM简介 查询数据层次图解:如果操作mysql,ORM是在pymysq之上又进行了一层封装 MVC或者MTV框架中包括一个重要的部分,就是ORM,它实现了数据模型与数据库的解耦,即数据模型的设计不需 ...
- 012 Android 动画效果(补间动画) +去掉App默认自带的标题+更改应用的图标
1.介绍 补间动画开发者只需指定动画开始,以及动画结束"关键帧", 而动画变化的"中间帧"则由系统计算并补齐! 2.去掉App的标题 (1)将AndroidMa ...
- mogodb数据库简单的权限分配
mongdb数据库默认不需要权限认证,但为了安全起见,最好设置下需要权限认证,启动的时候设置auth=true即可. 推荐通过mongodb.conf配置文件的形式启动mongodb 进入mong ...
- [SQL] - 报表查询效率优化
背景 系统将数据对象JSON序列化后存放到数据库字段中.Report 模块需要获取实时数据对象数值,当前在SQL中进行数值判断的耗时长,效率低. 分析 当前执行效率低主要是程序结构设计的不合理. SQ ...
- Python-03-流程控制
一.if判断语句 1. if...else if 条件: 满足条件时要做的事情1 满足条件时要做的事情2 ...... else: 不满足条件时要做的事情1 不满足条件时要做的事情2 ...... # ...
- 从零开始学Flask框架-005
表单 Flask-WTF 项目结构 pip install flask-wtf 为了实现CSRF 保护,Flask-WTF 需要程序设置一个密钥.Flask-WTF 使用这个密钥生成加密令牌,再用令牌 ...
- python数据库基础
1.数据类型:(使用原则:够用就行,尽量使用范围小的) 整数:int,bit 小数:decimal 字符串:varchar(可变长度),char(固定长度字符串) 日期时间:date,time,dat ...
- 机器学习支持向量机SVM笔记
SVM简述: SVM是一个线性二类分类器,当然通过选取特定的核函数也可也建立一个非线性支持向量机.SVM也可以做一些回归任务,但是它预测的时效性不是太长,他通过训练只能预测比较近的数据变化,至于再往后 ...
- leetcode算法题(4)
问题描述: 罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 我的解答: package Simple; public class RoamnInt { public static ...