位置: 编程技术 - 正文
JavaScript基础之this详解(javascript基础编程)
编辑：rootadmin推荐整理分享JavaScript基础之this详解(javascript基础编程)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:javascript基础入门教程,javascript语言基础,javascript+,javascript教程chm,javascript+,javascript tr,javascript tr,javascript tr,内容如对您有帮助，希望把文章链接给更多的朋友！
JavaScript的this和Java等面向对象语言中的this大不一样，bind()、call()和apply()函数更是将this的灵活度进一步延伸。
为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。
如果对JavaScript的关键字this理解不够深刻，有时候会掉入意想不到的坑。在这里我们总结了5条通用规则来帮助你判断this到底指向什么。虽然没有囊括所有的情况，但日常大部分情况都可以使用这些规则来正确推断。
this的值通常是由所在函数的执行环境决定，也就是说要看函数是如何被调用的；同一个函数每一次调用，this都可能指向不同的对象;
全局对象 (Global Object)
打开Chrome浏览器开发者面板(Windows: Ctrl + Shift + J)(Mac: Cmd + Option + J)，并且输入:
console.log(this);
看看输出了什么？
window对象！ 因为在全局作用域下，this指向全局对象。在浏览器中全局对象就是window对象。为了让你更加清楚理解为什么this会指向window对象，我们来看另外一个例子：
var myName = 'Brandon';我们可以通过在控制台输入myName来访问其值：
其实，所有在全局定义的变量都绑定到window对象。我们来做如下测试：
现在我们将this放到函数内部，看看有何效果。
你会发现this依然指向全局的window对象。因为this关键字没有处于一个声明的对象内部，默认指向全局window对象。这一点可能对于大部分初学者来说有点难以理解。当读完这篇文章，你就会豁然开朗。注意：如果在strcit模式下，上面的例子中this为undefined。
声明的对象 (Declared Object)
当this关键字在一个声明对象内部使用，其值会被绑定到调用该this的函数的最近的父对象。我们用例子来说明这个问题：
在被声明的对象person中的full函数里面使用了this, 那么调用this的full函数的最近的父对象就是person, 因此，this指向person。
为了更好的描述this实际上是指向person对象的，你可以拷贝如下代码到浏览器控制台，将this打印出来。
我们接下来看一个更复杂的例子：
在这里我们有嵌套的对象，在这个时候，this分别指向谁呢？ 我们将其打印出来看一看：
你会发现满足我们前面所描述的规则：其值会被绑定到调用this的函数的最近的父对象。
new关键字
当使用new关键字构建一个新的对象，this会绑定到这个新对象。我们来看一个例子：
根据第一条规则，你可能会推断this指向全局对象。但是如果我们使用new关键字来声明一个新的变量，Car函数中的this将会绑定一个新的空对象，然后初始化this.make和this.model的值。
call, bind, 和apply
我们可以显示的在call()，bind()，apply()中设置this的绑定对象。这三个函数很类似，但是我们需要注意它们微小的区别。
<!-- call可以接收任意个数的参数，其中第一个必须是一个this对象，其余依次是所有的参数。 -->
我们来看一个例子：
add函数输出NaN, 因为this.a和this.b未定义。
现在我们引入对象，并且使用call()和apply()来调用：
当我们使用add.call()，第一个参数是this需要绑定的对象，剩下的是add函数本来的参数。因此，this.a指向ten.a,this.b指向ten.b。add.apply()也类似，除了第二个参数是一个数组，用于存储add函数的参数。
bind()函数和call()类似，但是bind()函数不会立即被调用。bind()函数会返回一个函数，并且将this绑定好。接下来我们来用例子来帮助理解bind()函数的应用场景：
执行:
如果我们想使用large.a的值，而不是small.a呢？ 我们可以使用call/apply:
但是，如果我们现在还不知道这三个参数应该传入什么值，应该怎么办呢？ 我们可以使用bind:
var bindTest = small.go.bind(large, 2);
如果我们将bindTest在控制台下打印出来，我们会看到：
注意：该函数已经将this绑定到large对象，并且传入了第一个参数b。所以，我们接下来是需要传入余下的参数即可：
箭头函数(=>)
因为需要很大的篇幅，我们会专门写一篇博客来介绍。
结论
当你读完这篇博客，你应该可以理解大多数情况下this指向的对象。接下来我们来总结一下：
this的值通常是由当前函数的执行环境所决定；在全局作用域，this指向全局对象 (window对象)；当使用new关键字声明，this指向新建对象；我们可以使用call(), bind(), apply()来设置this；箭头函数不会绑定this。
原文: JavaScript: The Keyword ‘This' for Beginners
译者: Fundebug
JS失效 提示HTML: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8 经过分析发现，这个是因为页面中html与js编码不一致导致的，一般情况最好统一标准的utf8的上网找了找，木有找到相关的解决办法，索性自己试了试。
JavaScript简介_动力节点Java学院整理 JavaScript是一种基于对象(Object)和事件驱动(EventDriven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言实现在一个Web页面中连接多个对象
JS之if语句对接事件动作逻辑(详解) if函数的实现步骤：function+名字()指定id,指定开关(display:noneorblock)if+else构成逻辑控制开关决定在哪里安置一个灯泡,指定一个id给某个标签把开关用电线连
标签: javascript基础编程
本文链接地址:https://www.jiuchutong.com/biancheng/376072.html 转载请保留说明！上一篇：JavaScript箭头(arrow)函数详解(js 箭头表达式)
下一篇：JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8(js运行时错误)
