`
机器人
  • 浏览: 85107 次
  • 性别: Icon_minigender_2
  • 来自: Google
社区版块
存档分类
最新评论

理解Javascript中的this

阅读更多
先上代码:
var foo = {

   first: function(){
     console.log('I am first');
   },

   second: function(){
     console.log('I am second');
   },
};

foo.first();
foo.second();

没得问题,运行正常。

现在呢,我想在second方法中调用first方法,如下面这样做,你试一下,它不行的。
var foo = {

   first: function(){
     console.log('I am first');
   },

   second: function(){
     console.log('I am second');
     first();
   },
};

foo.second();


解决上面代码的一个办法就是指定first方法的接收者foot,如下所示:
var foo = {

   first: function(){
     console.log('I am first');
   },

   second: function(){
     console.log('I am second');
     foo.first();
   },
};

foo.second();


上面的代码能正常运行,不过对于foo.first感觉硬编码了,不爽啊,改进一下吧:
var foo = {

   first: function(){
     console.log('I am first');
   },

   second: function(){
     console.log('I am second');
     this.first();
   },
};

foo.second();

一切都很好。

javascript中可以在function中再创建一个function,我来改动一下second方法,在它里面再返回一个function:
var foo = {

   first: function(){
       console.log('I am first');
   },

   second: function(){
     return function(){
         this.first();
     }
   },
};

foo.second()();


请注意,我为了调用second方法中返回的方法,我调用的时候用了双括号()()哦。

以上的代码不会正常运行的,这是因为this变量已经改变了,现在second中的"this"是用的全局中的对象,而不是foo这个object。

解决上面的问题很简单的,在second的方法中先将this的值存在一个临时的变量啊,然后在second中的内部的function中使用那个临时的变量来代替this。这是一个可行的方案,因为javascript的继承支持闭包。because of Javascript’s inherent support for closure.

var foo = {

   first: function(){
       console.log('I am first');
   },

   second: function(){
     var self = this;
     return function(){
         self.first();
     }
   },
};

foo.second()();


原文:http://www.neeraj.name/blog/articles/864-understanding-this-in-javascript-object-literal
分享到:
评论

相关推荐

    深化理解Javascript中this的作用域_.docx

    在JavaScript中,`this`关键字的作用域是一个经常让人困惑的主题,尤其对于那些习惯于其他面向对象语言...在实际开发中,深入理解`this`的作用域和它如何根据上下文变化,将有助于写出更安全、更可靠的JavaScript代码。

    深入理解JavaScript中的this关键字

    正确理解和运用`this`,能够帮助开发者更好地掌握JavaScript的面向对象编程,从而在项目开发中游刃有余。对于初学者而言,可能需要花费一些时间来熟悉这些规则,但一旦掌握,将会大大提升编程效率和代码质量。

    深入理解JavaScript系列

    深入理解JavaScript系列(13):This? Yes, this! 深入理解JavaScript系列(14):作用域链(Scope Chain) 深入理解JavaScript系列(15):函数(Functions) 深入理解JavaScript系列(16):闭包(Closures) ...

    深入理解Javascript中this的作用域

    对大多数有OOP开发经验的开发人员来说this是当前作用域中引用普通元素的标识符,但是在Javascript中它却显得古灵精怪的,因为它不是固定不变的,而是随着它的执行环境的改变而改变。在Javascript中this总是指向调用...

    5分钟理解JavaScript中this用法分享

    JavaScript中的`this`关键字是一个非常重要的概念,它用于在函数或对象中引用当前上下文的对象。在不同的场景下,`this`的值会有所变化...通过这些实例和解释,希望能帮助你更好地理解和掌握JavaScript中的`this`用法。

    JavaScript中this关键字使用方法详解

    在JavaScript中,`this`的动态性使得开发者能够灵活地在不同对象间切换上下文,但也带来了理解和调试的挑战。通过掌握上述知识点,你应该能够更好地应对实际开发中的`this`问题。不过,`this`的使用还需要结合实际...

    javascript中onclick(this)用法介绍

    3. javascript中onclick中的this:这是调用obj.value得到的结果,显示了触发事件的元素的value属性值。 总结来说,在javascript中,onclick(this)的用法主要是将当前被点击的元素作为上下文对象传递给事件处理函数...

    关于javascript中this关键字(翻译+自我理解)

    函数的copy(复制)和refer(引用)问题也是理解JavaScript中this的一个要点。在复制函数的场景下,实际上是在创建函数的一个副本,这个副本的this可能会与原始函数不同。而在引用函数的场景下,函数本身的this不变...

    深入理解JavaScript系列(.chm)

    深入理解JavaScript系列(13):This Yes this 深入理解JavaScript系列(14):作用域链 Scope Chain 深入理解JavaScript系列(15):函数(Functions) 深入理解JavaScript系列(16):闭包(Closures) 深入...

    JavaScript程序设计javascript中this

    理解JavaScript中的`this`对于编写高效、健壮的代码至关重要。在实际开发中,尤其是在处理回调函数、事件处理和异步操作时,对`this`的掌握尤为重要。通过深入学习和实践,开发者能够更好地利用这一特性,提高代码...

    Javascript 中 this指向

    Javascript 中 this 指向 在Javascript中,this 指向是一个非常重要的概念,它的指向规律影响着函数的执行结果。理解 this 的指向是开发任务的必备技能。 首先,我们需要区分清楚作用域链和this是两套不同的系统,...

    Javascript中神奇的this

    理解并掌握JavaScript中的`this`绑定规则至关重要,因为它直接影响到代码的执行逻辑和可维护性。在编写JavaScript代码时,应尽量避免依赖隐式绑定,并明确使用显式绑定来确保`this`的行为符合预期。

    理解Javascript内存分配原理

    ### 理解JavaScript内存分配原理 #### 一、引言 在JavaScript编程中,内存管理是一个非常重要的概念。理解JavaScript如何处理内存分配对于优化代码性能、避免内存泄漏等问题至关重要。本文将详细介绍JavaScript中的...

    深入理解JavaScript系列(13) This? Yes,this!

    总之,理解JavaScript中的this关键字需要对执行上下文、函数调用方式、以及函数如何被定义和使用有深入的认识。通过本文对this关键字的分析,我们可以得到一个更加清晰和全面的理解,并在实际开发中更加自如地运用。

    JavaScript中this的使用

    总之,理解JavaScript中的`this`是掌握JavaScript面向对象编程的关键。通过对不同场景下`this`的用法进行分析,我们可以更好地控制代码中的对象引用,从而编写出更清晰、更易于维护的程序。在实际开发中,应根据需求...

    JavaScript中this指向.pdf

    这种特性使得this在JavaScript中具有了多重含义,对于初学者来说,确实是一个令人困惑的概念。 首先,需要明确的是,在JavaScript中,this关键字的指向不是在编译期确定的,而是在运行期确定的。这与大多数主流的...

    javascript 中 this 的用法.docx

    ### JavaScript 中 `this` 的用法详解 #### 一、引言 在 JavaScript 开发过程中,`this` 关键字的使用...掌握 `this` 的用法有助于开发者更好地理解 JavaScript 中的函数调用机制,进而编写出更加健壮和灵活的代码。

Global site tag (gtag.js) - Google Analytics