javascript在初版的设计上存在失误,导致了这门语言在使用时,经验型写法并不能得到像其它几个流行语言一样预期。其中的this的使用就是一个典型。

this在javascript中是由解释器注入的,并且在我们使用不同的方法定义函数时,注入的this含义不同。以下是crokford总结的四类情况。

如果你使用闭包时总是结果不如预期,又或者返回NaN 或 undefined ,那请注意参看本文。

0. 构造器函数内的this:

如果函数创建的目的是使用new来调用,并产生一个对象,那么此函数被称为 构造器函数。

var Niu = function (string) {

this.name = string;

};

  

上述的Niu即为一个构造器函数,其内部的this会自动绑定到new所创建的新对象上面。

1. 对象成员方法内的this:

对象的成员方法中的this是对象本身,此时跟其它语言是一致的,但是也有差异,javascript中this到对象的绑定发生在函数调用的时候。

var myObj = {

    value: 0,

    increment: function (inc) {

          this.value += typeof inc === 'number' ? inc : 1;

    }

};

myObj.increment();    //1

myObj.increment(2);   //3

  

2. 普通函数 与 闭包内的this:

2.1 以普通方式定义的函数中的this:会被自动绑定到全局对象。

var value = 232;

function toStr()

{

  console.log("%d", this.value);  //232

}

  

2.2 对象方法中闭包函数的this:

由2.1可知,在以普通方式定义的函数中的this会被自动绑定到全局对象上,大家应该可以看出闭包函数定义也与普通方式无异,因此他也会被绑定到全局对象上。

value = 10;
var closureThis = {
value: 0,
acc: function ()
{
var helper = function ()
{
this.value += 2;
console.log("this.value : %d", this.value);
}
helper();
}
}; closureThis.acc(); //12
closureThis.acc(); //14 var closureThat = {
value: 0,
acc: function ()
{
that = this;
var helper = function ()
{
that.value += 2;
console.log("that.value : %d", that.value);
}
helper();
}
}; closureThat.acc(); // 2
closureThat.acc(); // 4

从上述输出值可以看出,上述描述的正确性。

3. Apply函数的参数this:

appy方法允许我们选择一个this值作为第一个参数传递,第二个参数是一个数组,表明可以传递多个参数。

javascript中的this在不同场景下的区别的更多相关文章

  1. JavaScript 中定义变量时有无var声明的区别

    关于JavaScript中定义变量时有无var声明的区别 var a=5; //正确 a=5; //正确 在javascript中,以上两种方法都是定义变量的正确方法.微软的Script56.CHM中 ...

  2. JavaScript中querySelector()和getElementById()(getXXXByXX)的区别

    在日常开发中,使用JavaScript获取元素的时候,最常用的方法就是document.getElementById(getXXXByXX)方法.但是最近发现有很多地方使用的是querySelecto ...

  3. IOS5中的Safari不兼容Javascript中的Date问题,做下笔录吧!奶奶的,折腾我半天!

    在做Mobile终端的Website开发中,我遇到一个很懊恼的问题. 在IOS5以上版本(不包含IOS5)中的Safari浏览器能正确解释出Javascript中的 new Date('2013-10 ...

  4. JavaScript中instanceof与typeof运算符的用法及区别详细解析

    JavaScript中的instanceof和typeof常被用来判断一个变量是什么类型的(实例),但它们的使用还是有区别的: typeof 运算符 返回一个用来表示表达式的数据类型的字符串. typ ...

  5. javaScript中的return,break,continue的区别

    导语: javaScript中有三种方法可以跳出循环或者终止循环.分别为break.return.continue. 正文: 一.break break 会使得整个程序终止执行或者包含了最内层的循环或 ...

  6. JavaScript中的三种弹出框的区别与使用

    JavaScript中有三种原生的弹出框,分别是alert.confirm.prompt.分别表示弹出框.确认框.信息框. 以下是示例代码: <!DOCTYPE html> <htm ...

  7. JavaScript中的call 和apply的用途以及区别

    apply 接受两个参数,第一个参数指定了函数体内this 对象的指向,第二个参数为一个带下标的集合,这个集合可以为数组,也可以为类数组,apply 方法把这个集合中的元素作为参数传递给被调用的函数: ...

  8. Javascript中call方法和apply方法用法和区别

    第一次在博客园上面写博客,知识因为看书的时候发现了一些有意思的知识,顺便查了一下资料,就发到博客上来了,希望对大家有点帮助. 连续几天阅读<javascript高级程序设计>这本书了,逐渐 ...

  9. 在JavaScript中,++在前和++在后有什么区别

    一.++可以与输出语句写在一起,++写在变量前和写在变量后不是一个意思++ i 和 i ++ 区别在于运算顺序和结合方向. 在JavaScript中有两种自加运算,其运算符均为 ++,功能为将运算符自 ...

随机推荐

  1. xftp和xshell有什么区别

    XshellXshell是一个用于MS Windows平台的强大的SSH,TELNET,和RLOGIN终端仿真软件.它使得用户能轻松和安全地从Windows PC上访问Unix/Linux主机.Xft ...

  2. [APIO2011]方格染色

    题解: 挺不错的一道题目 首先4个里面只有1个1或者3个1 那么有一个特性就是4个数xor为1 为什么要用xor呢? 在于xor能把相同的数消去 然后用一般的套路 看看确定哪些值能确定全部 yy一下就 ...

  3. 基于python的机器学习开发环境安装(最简单的初步开发环境)

    一.安装Python 1.下载安装python3.6 https://www.python.org/getit/ 2.配置环境变量(2个) 略...... 二.安装Python算法库 安装顺序:Num ...

  4. 计蒜客 无脑博士的试管们 【dfs】

    题目链接:https://nanti.jisuanke.com/t/31 题目大意: 无脑博士有三个容量分别是A,B,C 升的试管,A,B,C 分别是三个从 1 到20 的整数,最初,A 和 B 试管 ...

  5. ImportError: cannot import name cbook

    Faster RCNN训练的时候,出现错误: from matplotlib import path, transforms File , in <module> from . impor ...

  6. 一次线上FullGC问题记录

    ​ 标题采自:英雄联盟-瑞文:断剑重铸之日,骑士归来之时! 断剑 ​ 前两天早上在挤地铁的时候看到小组群里,主管发了好多消息,打开来一看,说是XX项目自从22号发版后,每天晚上就疯狂Full GC,让 ...

  7. Javascript中call,apply,bind的区别

    一.探索call方法原理 Function.prototype.call = function(obj) { // 1.让fn中的this指向obj // eval(this.toString().r ...

  8. 通过Queue方法实现进程间通信

    from multiprocessing import Process,Queue import time def write(q): ): q.put(i) # time.sleep() print ...

  9. 最小生成树之克鲁斯卡尔(kruskal)算法

    #include <iostream> #include <string> using namespace std; typedef struct MGraph{ string ...

  10. React系列文章:Babel编译JSX生成代码

    上次我们总结了React代码构建后的Webpack模块组织关系,今天来介绍一下Babel编译JSX生成目标代码的一些规则,并且模拟整个生成的过程. 我们还是拿最简单的代码举例: import {gre ...