理解JavaScript里this关键字
1、全局代码中的this:始终指向window
2、函数代码中的this:
var foo = {x: };
var bar = {
x: ,
test: function () {
alert(this === bar);
alert(this.x);
}
};
bar.test(); //bar对象调用test(): true, 20
foo.test = bar.test;
foo.test(); //foo对象调用test(): false, 10
在通常的函数调用中,this是由激活上下文代码的调用者来提供的,即调用函数的父上下文(parent context )。this取决于调用函数的方式。
即使是正常的全局函数也会被调用方式的不同形式激活,这些不同的调用方式导致了不同的this值。
function foo() {
alert(this);
}
foo(); // window
alert(foo === foo.prototype.constructor); // true
// 但是同一个function的不同的调用表达式,this是不同的
foo.prototype.constructor(); // foo.prototype
var foo = {
bar: function () {
alert(this);
alert(this === foo);
}
};
foo.bar(); //foo、true
var exampleFunc = foo.bar;
alert(exampleFunc === foo.bar); //纯函数比较,是true
// 再一次,同一个function的不同的调用表达式,this是不同的
exampleFunc();//window、false
引用类型
引用类型的值与函数上下文中的this值如何相关?——从最重要的意义上来说。 这个关联的过程是这篇文章的核心。 一个函数上下文中确定this值的通用规则如下:
在一个函数上下文中,this由调用者提供,由调用函数的方式来决定。如果调用括号()的左边是引用类型的值,this将设为引用类型值的base对象(base object),在其他情况下(与引用类型不同的任何其它属性),这个值为null。不过,实际不存在this的值为null的情况,因为当this的值为null的时候,其值会被隐式转换为全局对象。
var foo = {
bar: function () {
alert(this);
}
};
foo.bar(); //foo
(foo.bar)(); //foo
(foo.bar = foo.bar)(); //window
(false || foo.bar)(); //window
(foo.bar, foo.bar)(); //window
第二个例子:在组运算的返回中,我们得到仍是一个引用类型 foo.bar 。这就是this值为什么再次设为base对象,即foo。与下面这例子区别:
(function () {
alert(this);
})();//()左边不是引用类型,所以是window,实际上在字面上完全等价于(foo.bar)(),但this指向就是不同,这就是核心区别。
第三、四、五例经过组运算后,得到的都不是引用类型,所以是window。
3、作为构造器调用的函数中的this:
function A() {
alert(this); // 新创建的对象new A
this.x = ;
}
var a = new A();
在这个例子中,new运算符调用“A”函数的内部的[[Construct]] 方法,接着,在对象创建后,调用内部的[[Call]] 方法。 所有相同的函数“A”都将this的值设置为新创建的对象。
4、手动设置函数的this值
在函数原型中定义的两个方法(因此所有的函数都可以访问它)允许去手动设置函数调用的this值。它们是.apply和.call方法。他们用接受的第一个参数作为this值,this 在调用的作用域中使用。这两个方法的区别很小,对于.apply,第二个参数必须是数组(或者是类似数组的对象,如arguments,反过来,.call能接受任何参数。两个方法必须的参数是第一个——this。
var b = ;
function a(c) {
alert(this.b);
alert(c);
}
a(); //10、20
a.call({b: }, ); //20、30
a.apply({b: }, []);//30、40
理解JavaScript里this关键字的更多相关文章
- 深入理解Javascript之this关键字
深入理解Javascript之this关键字 作者: Laruence( ) 本文地址: http://www.laruence.com/2009/09/08/1076.html 转载请注明出处 ...
- 正确理解javascript的this关键字
javascript有this关键字,它和javascript的执行上下文有着密切的关系,就是说this具体指代什么要根据它的上下文来判断. 一.this和对象的关系 var Person={ ...
- 理解javascript里的ABC--apply bind call
一,三者共同点 js中的apply,call,bind是对于初学者比较难的概念之一,比如说我..参考几篇文章之后,统一来讲, 1.这三个函数都属于Function.prototype下面的方法,如下图 ...
- 理解JavaScript里的 [].forEach.call() 写法
原文: http://www.webhek.com/javascript-foreach-call document.querySelectorAll() 返回的并不是我们想当然的数组,而是 Nod ...
- 转载 深入理解JavaScript中的this关键字
转载原地址: http://www.cnblogs.com/rainman/archive/2009/05/03/1448392.html 深入理解JavaScript中的this关键字 1. 一 ...
- 如何理解JavaScript中的this关键字
前言 王福朋老师的 JavaScript原型和闭包系列 文章看了不下三遍了,最为一个初学者,每次看的时候都会有一种 "大彻大悟" 的感觉,而看完之后却总是一脸懵逼.原型与闭包 可以 ...
- 理解JavaScript中的this关键字
JavaScript中this关键字理解 在爬虫的过程中遇到了前端的js代码,对于this关键字理解的不是很清楚,所以写下这篇笔记,不足之处,希望得以改之. this的指向在函数定义的时候无法确定,只 ...
- 正确理解JavaScript中的this关键字
JavaScript有this关键字,this跟JavaScript的执行上下文密切相关,很多前端开发工程师至今对this关键字还是模棱两可,本文将结合代码讲解下JavaScript的this关键字. ...
- 理解Javascript的柯里化
前言 本文1454字,阅读大约需要4分钟. 总括: 本文以初学者的角度来阐述Javascript中柯里化的概念以及如何在工作中进行使用. 原文地址:理解Javascript的柯里化 知乎专栏: 前端进 ...
随机推荐
- [转载] 你所不知道的TIME_WAIT和CLOSE_WAIT
前言 本文转载自 https://mp.weixin.qq.com/s/FrEfx_Yvv0fkLG97dMSTqw.很久前看到Vincent Bernat在博客中写了一遍关于TCP time-wai ...
- luoguP2231 [HNOI2002]跳蚤
题目链接 bzoj1220: [HNOI2002]跳蚤 题解 根据裴蜀定理,不定方程的解为未知数的gcd,所以选取的n个数的gcd为1 那么n - 1个数保证没有公约数为m的约数,枚举质因数容斥 质因 ...
- luogu P3592 [POI2015]MYJ
题目链接 luogu P3592 [POI2015]MYJ 题解 区间dp 设f[l][r][k]表示区间l到r内最小值>=k的最大收益 枚举为k的位置p,那么包含p的区间答案全部是k 设h[i ...
- [BZOJ4811][YNOI2017]由乃的OJ(树链剖分+线段树)
起床困难综合症那题,只要从高往低贪心,每次暴力跑一边看这一位输入0和1分别得到什么结果即可. 放到序列上且带修改,只要对每位维护一个线段树,每个节点分别记录0和1从左往右和从右往左走完这段区间后变成的 ...
- DP Training(Updating)
感觉前面做了那么多$dp$全是自己想的还是太少啊…… 好像在LZT的博客上看到了不错的资源?赶紧开坑,以一句话题解为主 Codeforces 419B 第一题就开始盗图 由于只有一个交点,手玩一下发现 ...
- Mysql的学习随笔day2
关于输入中文的问题,各种更改完utf8后仍然乱码. 最后找到一种可行的方法:在insert之前,输入 set names 'gbk' 约束保证数据的完整性和一致性.约束分为表级约束和列级约束,前者可以 ...
- BZOJ 4403: 序列统计 数学 lucas
4403: 序列统计 题目连接: http://www.lydsy.com/JudgeOnline/problem.php?id=4403 Description 给定三个正整数N.L和R,统计长度在 ...
- HDU 1269 移动城堡 联通分量 Tarjan
迷宫城堡 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submis ...
- MVC之Global.asax解析
大家看到上面的代码了,Application_Start大家都知道这是应用程序启动入口. AreaRegistration.RegisterAllAreas是什么呢? 我们先看看微软官方的注解: 我们 ...
- oracle数据库存储过程中NO_DATA_FOUND不起作用解决
oracle数据库存储过程中NO_DATA_FOUND不起作用 1.首先创建一个表lengzijiantest,表中只有一个字段f_id ? 1 2 3 4 5 [cpp] CREATE TABLE ...