`

JavaScript keyword 'this' 你真的懂吗?

阅读更多
  正题之前想问大家几个问题先。
  1.写过JS代码,而没用过this关键字的童鞋们请举手.
  2.已用过N加1次this关键字,但认为自己对this的理解不正确的请举手.

  有人举手吗?有人举两次手吗? 有吗,真的有吗? 相信是没有滴,无论是生理上还是心理上。这种心态太正常了:-) 符合期望值。
  但是呢...? 我们的目前对this的理解真是都是正确的吗? 我看未必,不信的话你可以和自己打赌,输的请赢的吃饭,之后再考考身边的同事们,看看他们的答案^__^

   OK不扯了,进入正题, 一例胜万言。
 
function person(name){
    this.__name = name;
    function sayHello(){
        alert("Hello,this is " + this.__name);
    }
    sayHello();
}

// 执行下一行的效果是 alert("Hello,this is spring") 大家都猜到了吧。一个声音:"这还用的着猜吗? OOXX"。
//别急,继续向下看。

person("spring");

//那这一行呢?
//1. 'person("spring")'都执行完了,__name早都没了
//2.  况且__name是属于person的一个属性,你在这直接写alert(__name), 就是person还存在,在它function体外也访问不到啊。
// OK, 如何是各位的理解是如此的话,请试着在你的 Chrome, Firefox 或 safari //browser中执行一下。

alert(__name)



//怎么样?什么情况呢现在? 少许的茫然...
//没关系, 再试一下下面几行

alert(this.__name)
alert(this)
alert(this === window)

  为了让大家更看清this的真实面目, 我们对上面的function进行了一点改造.

function person(name){
    this.__name = name;
    function sayHello(){
        alert("Hello,this is " + this.__name);
    }
    //sayHello();
    return this;
}

//OK 现在再试下
alert(this === person("spring") )

//现在明白了吧, 心想:"丫的this你原来指向的是window对象啊, 骗我那么久,现在终于明白了!"
// 别急下定论,继续向下试

var oneGuy = new person("cute");
alert(__name);  

//"还不是alert出来__name的值嘛, 和上面神马区别?",  对!就是因为完全没区别这才是大问题。
//再试执行一次仔细看看alert 出来的值是什么, 请看清楚是....spring, 而不是.... cute。大家要注意哦,我们最新传入的值可是cute而不是spring哦。不知道为什么没关系,再试...


alert(this === oneGuy)
//  false, 竟然是false! WHY???


   好了,例子就试到着先。 现在来说说为什么。这有两个概念需要澄清:
1. JavaScript的确是script即脚本语言,但不妨碍它是面向对象的语言。我们所有的变量声明,function定义,对象创建都是基于某一个对象

结点之上进行的。

2. 虽然JS是很活很强大,但也多少有一点点让人confused, 就function这一keyword而言, 它是可以一字两用的(多意字^_^)。
    a. 以 new person()出现时, 这时person表示的是person这个'class'的constructor---如同Java Class的constructor一样的概念。
    b. 以 function person("abc...")形式出现时,就只被认为是在其被定义对象节点上普通的一个方法如Java语言中的no-static method.

将两点结合到一起看呢来解决我们上面例子中出现的现象就好理解了。
1. 直接当method用时, 那么因为person这个方法是在当前对象节点window上定义或说声明的, 那么对用Java的童鞋们是显而易见的,no-

static method体中的this必然指向的是方法所被声明的对象实例(instance)本身,此处即window.

2. 而当constructor用时,可以理解为是在window对象实例上创建了个内部类的实例person对象(而不再是method), 那么实例化的person对象中的this肯定要指向它自己啦。


   最后总结,总而言之,总而言之。
一,要理解面向对象语言共有的对象实例的树形结构.
obj_0:
{
var v1,v2,v3;
function f1,f2,f3;
subObjectInstance obj_0_0 : {...},
                 obj_0_1 : {...},
                 obj_0_2 :
                          {
                          var v1,v2...;
                           function f1,f2.....;
                          subObjInstance obj_0_2_0 : {...},    obj_0_2_1 : {...},
                           },
}
        二,要理解this总是它指向其所被包含的最近一层的对象实例。
        三, function何时method何时constructor, 当然在JS世界中, function也可以被当做变量一样传值被传来传去。太给力了。
分享到:
评论

相关推荐

    JavaScript this keyword

    Study note on htis keyword in JavaScript

    Leanpub.JavaScript.and.Node.FUNdamentals.May.2014

    ##### 1.10 Keyword “this” 在JavaScript中,“this”关键字的含义取决于调用函数的上下文。在非严格模式下,全局作用域中的“this”通常指向全局对象,在函数调用中“this”可能指向调用该函数的对象,或者在事件...

    Pro JavaScript Techniques (2nd)

    You will learn about the 'this' keyword, as well as new object tools. You will be able to create reusable code with encapsulation, overloading and inheritance. The most recent techniques for debugging...

    JavaScript web转word文档

    var KeyWord = thisform.KeyWord.value; // ... 其他数据获取 ... ``` 这里使用了`HTMLEncode`函数对标题进行编码,防止HTML特殊字符导致的问题。这表明,在实际应用中,我们需要对用户输入的数据进行适当的处理,...

    Pro JavaScript Techniques(Apress,2ed,2015)

    You will learn about the 'this' keyword, as well as new object tools. You will be able to create reusable code with encapsulation, overloading and inheritance. The most recent techniques for debugging...

    javascript里使用php代码实例.docx

    `根据PHP变量`$keyword_assistant`的值选择输出`$keyword_queries`或`$keyword`到JavaScript的查询参数中。 4. **AJAX请求**: - 当需要在JavaScript中动态获取服务器数据时,通常使用AJAX(Asynchronous ...

    JavaScript 语言基础知识点总结(思维导图)

    JavaScript,作为全球最广泛使用的编程语言之一,是创建动态网页和交互式应用程序的关键工具。它是一种轻量级、解释型的脚本语言,主要应用于Web开发。以下是对JavaScript语言基础的详细总结,涵盖的主要知识点包括...

    JavaScript下拉框筛选可搜索

    const keyword = this.value.toLowerCase(); for (let i = 0; i ; i++) { const option = select.options[i]; if (option.text.toLowerCase().includes(keyword)) { option.style.display = 'block'; // 显示...

    js使用keyword

    【标题】"js使用keyword"涉及的JavaScript编程关键知识点 JavaScript是一种广泛应用于Web开发的脚本语言,尤其在客户端浏览器环境中。"keyword"在这里通常指的是JavaScript中的关键字,它们是具有特殊含义的语言...

    JavaScript in 10 Minutes

    3. **Meaning of This**: Discusses the behavior of the `this` keyword in different contexts, including how it behaves differently inside a function compared to when used outside a function. - **Eta ...

    Learn by Example: JavaScript for Front-End and Mobile App Development

    This book aims to take someone completely new...The this keyword Get elements from the DOM Building your first mobile app Becoming an app developer Deploying your app to the Android and iTunes app stores

    Secrets of the JavaScript Ninja, 2nd Edition

    This guide provides a comprehensive overview of advanced JavaScript techniques and features covered in "Secrets of the JavaScript Ninja, 2nd Edition." By mastering these concepts, developers can write...

    【JavaScript源代码】Vue 路由返回恢复页面状态的操作方法.docx

    this.$store.commit('saveSearchState', { keyword: this.keyword, page: this.page, filter: this.filter }); next(); } ``` 2. **恢复状态**:在目标页面加载时从本地存储中恢复状态。 ```javascript ...

    javascript经典特效---搜索引擎的集合.rar

    JavaScript是一种广泛应用于网页和网络应用开发的脚本语言,它主要负责实现客户端的交互效果和动态功能。在“javascript经典特效---搜索引擎的集合.rar”这个压缩包中,我们聚焦的是JavaScript在实现搜索引擎特效上...

    使用JSDoc建立JavaScript代码的文档

    This function is assigned in the class constructor rather than using the prototype keyword. * @returns The Person's name * @type String */ this.getName = function() { return name; } } /** * ...

    【JavaScript源代码】vue 页面跳转的实现方式.docx

    searchWords: this.keyWord, pageSize: this.paging.pageSize, pageNo: this.paging.currentPage }; let data = { type: item.srcType, tableName: item.tableName, name: item.datasourceName, tableId: ...

    flex与ajax交互、flex与javascript交互.docx

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> ;charset=UTF-8"> <script src="bridge/FABridge.js"></script> ...

    Javascript实现一个简单的输入关键字添加标签效果实例

    为了实现这些功能,我们可以编写一个JavaScript对象,例如`keyWord`,它包含一些必要的方法和属性。这里的关键方法可能包括`init`,用于初始化功能,以及处理键盘事件的方法,如`handleKeydown`。 以下是简化的`...

    基于javascript制作经典传统的拼图游戏

    本文实例为大家分享了javascript制作经典传统的拼图游戏的关键代码,供大家参考,具体内容如下 效果图: 拼出你喜欢的白雪公主和七个小矮人 实现代码: <!DOCTYPE html> <html> <head> <title...

    the-keyword-this

    ##目标通过完成一系列活动来更好地理解Javascript中的this关键字 ## Directions分叉此仓库,克隆您的分叉,然后打开Practice.js并完成所有活动。 会费 如果您发现问题或错别字,请进行分叉,进行必要的更改,然后...

Global site tag (gtag.js) - Google Analytics