JavaScript 中 this 的用法

在 JavaScript 中,this 是动态绑定,或称为运行期绑定的。一般而言,在Javascript中,this 指向函数执行时的当前对象。

由于其运行期绑定的特性,JavaScript 中的 this 可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式。JavaScript 中函数的调用有以下几种方式:没有明确的调用对象,作为对象方法调用,使用 new 关键字作为构造函数调用,和使用 apply、 call 和 eval 调用。

没有明确的当前对象时

当没有明确的执行时的当前对象时,this 指向全局对象 window

纯粹的函数调用

举个栗子

123456
var x = 1;function test(){    var x = 2;    alert(this.x);}test();     // 1

再看个复杂的栗子

123456789101112131415161718
var name = "window";

var Bob = {    name: "Bob",    showName: function(){        alert(this.name);    }};

var Tom = {    name: "Tom",    showName: function(){        var fun = Bob.showName;        fun();    }};

Tom.showName();  //window

其实也不复杂,只要按照上面那句话来判断就行。

setTimeout、setInterval和匿名函数

在浏览器中 setTimeoutsetInterval 和匿名函数执行时的当前对象是全局对象 window,这条可以看成是上一条的一个特殊情况。

123456789101112
var name = "Bob";  var nameObj = {      name : "Tom",      showName : function(){          alert(this.name);      },      waitShowName : function(){          setTimeout(this.showName, 1000);      }  };  

nameObj.waitShowName();     // Bob

setTimeout 可以看做是一个延迟执行的匿名函数。

12345
waitShowName : function(){      function(__callback){       __callback();    }(this.showName);  }

由于匿名函数的当前对象是 window,所以当在该匿名函数中运行回调函数时,回调函数的 this指向了 window,所以 alert 出来 window.name 。

作为对象方法调用时

使用这种调用方式时,this 被自然绑定到该对象。

通常情况

12345678
var text = ‘window‘var obj = {    text: ‘obj‘,    foo: function(){        console.log(this.text);    }}obj.foo();      // obj

内部函数调用

但是,如果在 obj 的 foo() 内部再声明一个函数,在内部函数中调用 this,像下面这样:

123456789101112
‘use strict‘;var obj = {    text: ‘hello world‘,    foo: function(){        return function(){            console.log(this.text);        }()    }}

obj.foo();      // Uncaught TypeError: Cannot read property ‘text‘ of undefined

这是因为 this 指针只在 foo 方法的函数内指向 obj ,在函数内部定义的函数, this 又指向undefined 了!(在非 strict 模式下,它重新指向全局对象 window !)

修复的办法是用一个 that 变量首先捕获 this :

1234567891011
‘use strict‘;var obj = {    text: ‘obj‘,    foo: function(){        var that = this;        return function(){            console.log(that.text);        }()    }}obj.foo();  // obj

三种特殊情况

new关键字 - 作为构造函数调用时

所谓构造函数,就是通过这个函数生成一个新对象。这时,this 就指这个新对象。

12345678910
function Person(__name){    this.name = __name;    // this 指向使用该构造函数构造的新对象}Person.prototype.show = function(){    alert(this.name);}

var Bob = new Person("Bob");Bob.show();        //Bob

apply 和 call

在 JavaScript 中函数也是对象,对象则有方法,apply() 和 call() 就是函数对象的方法。它们能够强制改变函数执行时的当前对象,让 this 指向其他对象。

apply() 接收两个参数,第一个参数就是需要绑定的this变量,第二个参数是 Array,表示函数本身的参数。call() 与 apply() 的唯一区别就是把函数本身的参数一个个传入。

123
// 对普通函数调用,通常把 this 绑定为 nullMath.max.apply(null, [3, 5, 4]); // 5Math.max.call(null, 3, 5, 4); // 5

举个使用 apply() 改变当前对象的栗子:

123456789101112131415
var name = "window";

var someone = {    name: "Bob",    showName: function(){        alert(this.name);    }};

var other = {    name: "Tom"};    

someone.showName.apply();    // windowsomeone.showName.apply(other);    // Tom

apply() 的参数为空时,默认调用全局对象。

eval

对于 eval 函数,其执行时候似乎没有指定当前对象,但实际上其 this 并非指向 window,因为该函数执行时的作用域是当前作用域,即等同于在该行将里面的代码填进去。

12345678910
var name = "window";

var Bob = {    name: "Bob",    showName: function(){        eval("alert(this.name)");    }};

Bob.showName();    //Bob

参考

  1. 对 js 中 this、apply、call 和闭包的理解
  2. Javascript中this关键字详解
  3. 深入浅出 JavaScript 中的 this
  4. Javascript的this用法
时间: 2024-10-02 04:57:37

JavaScript 中 this 的用法的相关文章

javascript中NaN的用法

NaN是一个特殊的数值,任何数值除以0会返回NaN,不会影响其他代码的执行(其实为0/0为NaN,正数除以0得到infinity,负数除以0得到负的infinity) 它的特点为: 1.任何涉及NaN的操作都返回NaN 2.NaN与任何值都不相等,包括NaN 它涉及到的函数为isNaN();该函数接受一个参数,该参数可以是任何类型 javascript中NaN的用法,布布扣,bubuko.com

译:理解并掌握 JavaScript 中 this 的用法

原文链接:http://javascriptissexy.com/understand-javascripts-this-with-clarity-and-master-it/ 文章描述:本文原文来自 Javascript.isSexy 这个网站.这篇文章和文中提到的另一篇文章解决了我一直以来对 this 和 apply, call, bind 这三个方法的困惑.我看过很多国内相关的技术文章,没有一篇能让我彻底理解这些概念的.因此我决定把它译过来,不要让更多的初学者像我一样在这个问题上纠结太长时

javascript中console的用法

Javascript的console.log()用法 //变量var i = 'I am a string';console.log('变量:',i); //数组var arr = [1,2,3,4,5];console.log('数组:',arr); //对象var obj1 = {key1 : 'value1',key2 : 'value2',key3 : 'value3'};var obj2 = {key6 : 'value4',key5 : 'value5',key4 : 'value6

JavaScript中Cookie的用法

Javascript中Cookie主要存储于客户端的计算机中,用于存放已访问的站点信息,Cookie最大约为4k.以下实例主要用于页面在刷新时保存数据,具体的用法如下所示: <html> <head><title></title> </head> <body> <script type="text/javascript"> window.onload = function () { PersentVal

理解并掌握 JavaScript 中 this 的用法[转]

本文原文来自 Javascript.isSexy 这个网站 来源:code.mforever78.com JavaScript this 用法基础 理解 JavaScript this 的关键 在全局作用域中使用 this this 最容易被误解和难以掌握的情景 1. 解决当包含 this 的方法被当做回调函数时遇到的问题 2. 解决当 this 出现在闭包内遇到的问题 3. 解决把一个 this 方法 赋给一个变量时出现的问题 4. 解决当借用方法的时候 this 的值不正确的问题 结语 我们

JavaScript中一些怪异用法的理解

引言 JavaScript这门语言有些场合的用法还是比较怪异的.这篇文章会尽量将这门语言特有的一些比较特殊的用法收集在一起.就当是平时开发时需要注意的地方吧. 特殊用法收集 1.!!用法 在JavaScript中经常看到判断一个对象是否有某一个属性或者在进行客户端检测的时候会出现!!这个用法.相信大家都看到过var isIE=!!document.all这样的代码把.那为什么需要使用!!呢? !!作用就在于:如果明确设置了对象中属性的值(非 null/undefined/0/""等值)

javascript中的继承用法

本文实例汇总了javascript关于继承的用法,希望本文所述对大家的javascript程序设计有所帮助.分享给大家供大家参考.具体如下:代码如下: /** * 实现子类继承父类,但不会产生多余的属性和方法 * @returns {Function} */ define(function(){ return function(subType, superType){ var proto = new Object(superType.prototype); proto.constructor =

javascript中的this用法

this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象.但是在javascript中,由于 javascript的动态性(解释执行,当然也有简单的预编译过程),this的指向在运行时才确定.这个特性在给我们带来迷惑的同时也带来了编程上的 自由和灵活,结合apply(call)方法,可以使JS变得异常强大.

javascript中setInterval的用法

javascript中的setInterval的函数主要是在制作动画或其他间隔性渲染(操作)效果时,对操作方法按照一定时间间隔进行调用的函数. setInterval的表达式格式主要有: setInterval(fnname,time,par1,par2,........parn); setInterval(obj,fnname,time,par1,par2,......parn); 第一种是最常见的表达语法,其中fnname参数可以是一个匿名函数的引用或者是一个函数名,time是设定的调用fa