深入认识JavaScript中的this指针,学习群76650734

合集下载

js中的this关键字详解

js中的this关键字详解this是Javascript语⾔的⼀个关键字。

它代表函数运⾏时，⾃动⽣成的⼀个内部对象，只能在函数内部使⽤。

⽐如，复制代码代码如下: function test(){ this.x = 1; }随着函数使⽤场合的不同，this的值会发⽣变化。

但是有⼀个总的原则，那就是this指的是，调⽤函数的那个对象。

下⾯分四种情况，详细讨论this的⽤法。

这是函数的最通常⽤法，属于全局性调⽤，因此this就代表全局对象Global。

请看下⾯这段代码，它的运⾏结果是1。

复制代码代码如下: function test(){ this.x = 1; alert(this.x); } test(); // 1为了证明this就是全局对象，我对代码做⼀些改变：复制代码代码如下: var x = 1; function test(){ alert(this.x); } test(); // 1运⾏结果还是1。

再变⼀下：复制代码代码如下: var x = 1; function test(){ this.x = 0; } test(); alert(x); //0函数还可以作为某个对象的⽅法调⽤，这时this就指这个上级对象。

复制代码代码如下: function test(){ alert(this.x); } var o = {}; o.x = 1; o.m = test; o.m(); // 1所谓构造函数，就是通过这个函数⽣成⼀个新对象（object）。

这时，this就指这个新对象。

复制代码代码如下: function test(){ this.x = 1; } var o = new test(); alert(o.x); // 1运⾏结果为1。

为了表明这时this不是全局对象，我对代码做⼀些改变：复制代码代码如下: var x = 2; function test(){ this.x = 1; } var o = new test(); alert(x); //2运⾏结果为2，表明全局变量x的值根本没变。

js this的理解

如何理解js中的thisthis的值取决于它所在的函数如何被调用。

下面是this可以获得新值的6种不同方式：•this在全局范围内•this在对象的构造函数内•this在对象的方法内•this在一个简单的函数内•this在箭头函数内•this在一个事件侦听器内下面我们一起来看看this是如何在每个环境中被改变的。

一、this在全局范围内当this在任何函数外面被调用时，也就是说在全局环境中被调用，在浏览器中。

它默认指向window 对象。

console.log(this) // Window一般在全局环境中，我们很少用this关键字，所以我们对它也没有那么在意，继续看下一个环境。

二、this在对象的构造函数内当我们使用new关键字创建一个对象的新的实例时，this关键字指向这个实例。

.functi on Human (age) {..th is.age = age;..}..let gr eg = new Human(22);..let th omas = new Human(24);...consol e.log(greg); // this.age = 22..consol e.log(thomas); // this.age = 24.通过上面的代码，我们会发现，greg是Human的一个实例，现在无论何时调用greg，this都不会指向thomas。

所以让this指向对象的实例是完全有道理的。

接下来让我们看一个密切相关的环境。

三、this在对象的方法内方法是与对象关联的函数的另一个通俗叫法，如下所示。

(注: 这里的方法是用ES6语法来写的, 如果不知道它们是什么, 请参见这里)..let o = {..// A method..aM ethod(){}..}.在对象的任何方法内的this都是指向对象本身。

.let o = {..sa yThis(){.console.log(this);..}..}....o.sayThis() // o.既然this指向对象本身，你就可以用方法来获取对象的实例，如下所示：.functi on Human(name) {..re turn {..name,..getName() {..return ;..}..}..}....const zell = new Human("Zell");..const vincy = new Human("Vincy");....consol e.log(zell.getName()); // Zell.在这两个对象上下文中, 改变的this值使你获得正确的实例, 这就是面向对象的编程的基础. 当然, 这是另外一个话题了.四、this在一个简单的函数内简单函数应该是我们非常熟悉的函数了，就像下面这个一样，以相同形式编写的匿名函数也被认为是简单函数。

深入理解Javascript之this关键字

深入理解Javascript之this关键字Javascript是一种很灵活的语言, 而This关键字又是灵活中的灵活, 但是因为它的灵活, 也注定了它的难用.以前我用this的时候, 都会觉得不踏实, 老是担心它不知道怎么地就会指到另外的什么地方.其实, 这都是因为, 我们对它的不了解.刚好最近再给百度学院做《Javascript高级-作用域/原型链》的ppt, 而swit1983网友也刚好提这个问题, 索性就把这部分内容独立总结出来, 与大家分享.首先, 我先抛出一个定论:”在Javascript中,This关键字永远都指向函数(方法)的所有者”.函数首先,让我们看看”函数”:.function introduce() {.alert("Hello, I am Laruence\r\n");.}对于,这个函数, this关键字指向谁呢?如我之前的文章所述(Javascript作用域), 定义在全局的函数, 函数的所有者就是当前页面, 也就是window对象.这也就是为什么, 我把函数用引号引起来. 因为定义在全局的函数, 其实也就是window对象的一个方法.所以,我们即可用通过函数名直接调用, 也可用通过window.方法名来调用, 这个时候, 方法中的this关键字指向它的所有者:window对象.如果, 我们查看window的introduce属性, 就会得到:.var name = "I am Laruence";.function introduce() {.alert();.}.alert(window.introduce);./**.* output:.* function introduce() {.* alert();.* }.*/看了上面的代码, 也许你就会想到既然, 全局函数是window对象的方法, 全局变量是window对象的属性(Javasript作用域中已有述及), 那么,在全局函数中就可用通过this关键字来访问全局变量吧?答案是肯定的, 如果调用introduce函数, 你就会认识我是Laruence.事件处理函数也许, 对于this关键字的迷惑, 绝大部分原因是来自把函数(方法)用在事件处理的时候..<input id="name"type="text"name="name"value="Laruence"/>比如, 我们现在需要在点击”name”输入框的时候, 显示出name输入框的value. 那么, 可用写下如下代码:.function showValue() {.alert(this.value);.}.document.getElementById('name').onclick = showValue;上面的代码, 运行正常, 但是why? 不是说函数的this指针永远指向函数所有者么? 不是说全局变量的所有者是window对象么?呵呵, 如果你能想到这个问题, 那说明你在认真的看我的文章, 否则,,我建议你从头看起, 否则看完了,你还是迷糊~恩, 对, 对于上面的代码, showValue是定义在了全局对象, 那么看来问题只能发生在onclick事件绑定的时候了.我们知道, 在Js中一切都是对象, 函数和方法也都是对象的属性, 只不过函数有可执行的内部属性.所以, 对于上面的代码, 在对onclick绑定处理器的时候, 其实是对id为name的输入框Dom对象的onclick属性赋值.也就是说, 我们把函数showValue Copy 给了name输入框对象的onclick属性. 如果我们查看此时的onclick:.function showValue() {.alert(this.value);.}.document.getElementById('name').onclick = showValue;.alert(document.getElementById('name').onclick);./**.* output.* function showValue() {.* alert(this.value);.* }.*/所以, 当事件触发的时候, 就会去调用name输入框的onclick方法, 这个时候,this关键字自然就指向的是name输入框了.但是, 迷惑的事情就来了, 比如下面这种写法:.function showValue() {.alert(this.value);.}.<input id="name"type="text"name="name"value="Laruence"onclick="showValue()"/>就无法正常运行, 这又是为什么呢?恩, 因为这个时候, 并不是赋值, 而是引用.如果我们注意俩种onclick的写法, 你会发现, 对于之前的方法, 我们使用的是:.dom.onclick = showvalue; //没有调用符而对于刚才的方法:.onclick = "showvalue()"//有调用符这个也能侧面的反映出俩者的区别:对于前者,是赋值, 而对于后者是引用. 如果我们这个时候查看输入框的onclick属性,我们得到:.alert(dom.onclick);./**.* output:.* function onclick() {.* showValue();.* }.*/看到区别了么? 也就懂得为什么了吧?讲到这里, 有一个很有趣的例子 ,大家可以在IE下试试:.<img src="xxx" onerror="alert(1);} function hi() { alert(2); " />改变this的指向那, 既然我们已经知道为什么了, 那怎么才能让this指向我们想要指的地方呢?对于上面的事件处理函数来说, 我们可以有如下几种写法:.dom.onclick = showValue();.dom.onclick = function() { alert(this.value) ;}.<input onclick="alert(this.value);"/> //想想刚才我们的引用,是如何把这句嵌入的..dom.addEventListener(dom, showValue, false); //ff only而对于不是事件处理函数的场合, 我们可以使用apply, 或者call, 来改变this关键字的指向.比如:.var laruence = {. name : 'laruence',. age : 26,. position : 'Senior PHP Engineer',. company : 'Baidu.inc'.};..function introduce() {.alert();.}..introduce.call(laruence);。

javaScript中的this的用法

进行批量添加事件时，this均可正确指向。
图示：
图3：多次Traditonal Event Registration
2) Inline Event Registration
形如 <element onclick=”doSomething()”>
图示:
图4：B场景 Inline Event Registration
element.onclick = doSomething;
doSomething的引用(地址)赋给了element的onclick属性(这样就成为了函数)。此时
doSomething运行时拥有者(owner)就变成了element,this便指向了element。
图示：
图2: B场景 Traditional Event Registration
可以得到 :
function onclick(){
doSomething();
}
这仅仅是对doSomething()函数的一次调用,而doShomething的拥有者是window,因此 doSomething内的this指向window对象（啰嗦哦…….）.
3 . C场景
*/
//通过这种方式可以解决这个问题[有些情况也可用tempThis = this这种形式]ห้องสมุดไป่ตู้
this.btn.onclick = passHandler(this,btnOnclick);}function btnOnclick()
{
//如果this是DOM对象，这里就会报错，因为没有btn属性
2.2 this 指向分析
1 A场景。

关于js里的this关键字的理解

关于js⾥的this关键字的理解this关键字在c++，java中都提供了这个关键字，在刚开始学习时觉得有难度，但是只要理解了，⽤起来就⽅便多了，下⾯通过本篇⽂章给⼤家详解js⾥this关键字的理解。

关于this，是很多前端⾯试必考的题⽬，有时候在⽹上看到这些题⽬，⾃⼰试了⼀下，额，还真的错了！在实际开发中，也会遇到 this 的问题（虽然⼀些类库会帮我们处理），例如在使⽤⼀些框架的时候，例如:knockout，有时候不明⽩为什么不直接使⽤this,⽽要把 this 作为参数传⼊。

接下来你谈谈我对它的理解，也作为⼀个笔记，⽅便以后参阅。

有不对的地⽅，欢迎指出批评。

1. 不像C#，this⼀定是指向当前对象。

js的this指向是不确定的，也就是说是可以动态改变的。

call/apply 就是⽤于改变this指向的函数，这样设计可以让代码更加灵活，复⽤性更⾼。

2. this ⼀般情况下，都是指向函数的拥有者。

这⼀点很重要！这⼀点很重要！这⼀点很重要！这也是⼀道常见的⾯试题，如下代码：<script type="text/javascript"> var number = 1; var obj = { number: 2, showNumber: function(){ this.number = 3; (function(){ console.log(this.number); })(); console.log(this.number); } }; obj.showNumber();</script>由于showNumber⽅法的拥有者是obj，所以this.number=3; this 指向的就是 obj 的属性 number。

同理，第⼆个 console.log 打印的也是属性 number。

为什么第⼆点说⼀般情况下this都是指向函数的拥有者，因为有特殊情况。

详解javascript中的this对象

详解javascript中的this对象前言Javascript是一门基于对象的动态语言，也就是说，所有东西都是对象，一个很典型的例子就是函数也被视为普通的对象。

Javascript可以通过一定的设计模式来实现面向对象的编程，其中this “指针”就是实现面向对象的一个很重要的特性。

但是this也是Javascript中一个非常容易理解错，进而用错的特性。

特别是对于接触静态语言比较久了的同志来说更是如此。

示例说明我们先来看一个最简单的示例：<script type="text/javascript">var name = "Kevin Yang";function sayHi(){alert("你好，我的名字叫" + name);}sayHi();</script>这段代码很简单，我们定义了一个全局字符串对象name和函数对象sayHi。

运行会弹出一个打招呼的对话框，“你好，我的名字叫Kevin Yang”。

我们把这段代码稍微改一改：<script type="text/javascript">var name = "Kevin Yang";function sayHi(){alert("你好，我的名字叫" + );}sayHi();</script>这段代码和上段代码的区别就在于sayHi函数在使用name的时候加上了this.前缀。

运行结果和上面一摸一样。

这说明引用的也还是全局的name对象。

开头我们不是说了，函数也是普通的对象，可以将其当作一个普通变量使用。

我们再把上面的代码改一改：<script type="text/javascript">var name = "Kevin Yang";function sayHi(){alert("你好，我的名字叫" + );}var person = {};person.sayHello = sayHi;person.sayHello();</script>这一次，我们又创建了一个全局对象person，并将sayHi函数对象赋给person对象的sayHello属性。

JavaScript中this详解

JavaScript中this详解this是 JavaScript 语⾔的⼀个关键字。

它是函数运⾏时，在函数体内部⾃动⽣成的⼀个对象，只能在函数体内部使⽤。

function test() {this.x = 1;}上⾯代码中，函数 test 运⾏时，内部会⾃动有⼀个this对象可以使⽤。

⼀、this 的值是什么函数的不同使⽤场合，this有不同的值。

总的来说，this就是函数运⾏时所在的环境对象。

⼆、this 的使⽤场景1、作为⼀般函数执⾏2、作为对象属性执⾏3、作为构造函数执⾏4、通过 call、apply、bind 调⽤三、this 的判断1. 作为⼀般函数执⾏时，this 指代全局对象function test(){this.x = 1;alert(this.x);}test(); // 12. 作为对象属性执⾏时，this 指代上级对象function test(){alert(this.x);}var o = {};o.x = 1;o.m = test;o.m(); // 13. 作为构造函数调⽤时，this 指代 new 出的对象var x = 2;function test(){this.x = 1;}var o = new test();alert(x); // 2alert(o.x); // 1对于 new 的⽅式来说，this 被永远绑定在了 o 上⾯4. call、apply、bind 调⽤时，this 指代第⼀个参数let a = {}let fn = function () { console.log(this) }fn.bind().bind(a)()上述代码中，不管我们给函数 bind ⼏次，fn 中的 this 永远由第⼀次 bind 决定，所以结果永远是 window四、总结。

this指向的理解

this指向的理解在JavaScript中,`this`关键字是一个特殊关键字,用于引用当前正在作用的对象。

它是JavaScript中操作DOM对象和函数时的一个重要概念。

`this`关键字在作用域中的位置非常重要。

只有在函数定义中使用`this`,它才会指向当前函数所在的作用域。

如果在函数体中使用`this`,则`this`会指向函数体本身。

下面是一个简单的示例,说明`this`关键字在作用域中的用法: ```javascriptfunction myFunction() {console.log("this is within myFunction");}myFunction(); // this is within myFunction```在上面的示例中,`.myFunction()`本身是一个函数调用,`this`会指向函数调用本身。

当函数调用`myFunction()`时,`this`也会指向函数调用本身。

另一个示例是:```javascriptfunction myFunction() {console.log("this is within myFunction");}myFunction.call(this); // this is within myFunction```在这个示例中,`myFunction.call(this)`将函数call到`myFunction`对象上,并将`this`指向调用的函数本身。

除了使用`call()`和`apply()`方法之外,`this`关键字还可以通过属性引用来访问对象的属性。

例如:```javascriptfunction myFunction() {console.log("this is within myFunction"); = "John";} = "Jane"; // this is within myFunction ```在这个示例中,我们将``更改为`"Jane"`。

JavaScript的this关键字的理解_基础知识.doc

JavaScript的this关键字的理解概念性的概述this 当一个函数创建后，一个关键字this就随之（在后台）创建，它链接到一个对象, 而函数正是在这个对象中进行操作。

换句话说，关键字this可在函数中使用，是对一个对象的引用，而函数止是该对象的展性或方法。

让我们来看这个对象：<!DOCTYPE html Xhtml lang=，，en z，><body><script> var cody = {living:true,age:23,gender:' male', getGender:function(){return cody. gender;}};conso lc. 1 og(cod y. get Gender ()) ; // logs 5 male，</script></body></html>注意在函数getGender里，由于在cody对象内部，我们可以通过.来获取gender 属性(也就是cody. gender)。

也可以用this来获取cody对象,因为this正是指向cody对象。

< 1D0CTYPE htmlXhtml lang=/，en，，Xbody><script> var cody = {living:true,age:23,gender / malc，,getGender:function(){return this.gender;}}；con sole, log (cody. getG en der ()) ; // logs 'male'</scriptX/bodyX/html >this, gender中this指向cody对象,而getGender函数可以操作cody对象。

关于this的主题可能冇点让人感到困惑，其实不必如此。

教你彻底弄懂JS中this的指向

教你彻底弄懂JS中this的指向JS 中 this 机制this 是什么调⽤的⽅法this 是什么理解this之前，先纠正⼀个观点，this 既不指向函数⾃⾝，也不指函数的词法作⽤域。

如果仅通过this的英⽂解释，太容易产⽣误导了。

它实际是在函数被调⽤时才发⽣的绑定，也就是说this具体指向什么，取决于你是怎么调⽤的函数。

也就是说谁调⽤的this，this就指向谁1.纯粹的函数调⽤这是函数的最通常⽤法，属于全局性调⽤，因此this就代表全局对象。

请看下⾯这段代码，它的运⾏结果是1。

来看这段代码：var a = 2;function fun() {}console.log( this.a );fun();此时的打印结果是2因为fun()是直接调⽤的（独⽴函数调⽤），没有应⽤其他的绑定规则，这⾥进⾏了默认绑定，将全局对象绑定this上，所以this.a 就解析成了全局变量中的a，即2。

此时的this相当于Window2.作为对象⽅法的调⽤函数还可以作为某个对象的⽅法调⽤，这时this就指这个上级对象。

function test() {console.log(this.x);}var obj = {};obj.x = 1;obj.m = test;obj.m();此时打印结果为1；this相当于obj对象3.作为构造函数调⽤所谓构造函数，就是通过这个函数，可以⽣成⼀个新对象。

这时，this就指这个新对象。

js中this的理解

js中this的理解JavaScript是一种非常流行的编程语言，它在Web开发中扮演着重要的角色。

在JavaScript中，this是一个非常重要的关键字，它用于引用当前函数所属的对象。

在本文中，我们将深入探讨this的概念、用法和一些常见的问题，帮助读者更好地理解JavaScript中的this。

什么是this？首先，让我们来看一下this的定义。

this是JavaScript中一个特殊的关键字，它在函数内部使用，用于引用当前函数所属的对象。

具体来说，this指向调用当前函数的对象。

如果函数没有被任何对象调用，则this指向全局对象（在浏览器中为window对象）。

在JavaScript中，this的值是在运行时确定的，而不是在编写时确定的。

这意味着在不同的上下文中，this可能引用不同的对象。

this的用法接下来，我们来看一下this的用法。

在JavaScript中，this 通常用于以下两种情况：1.作为方法调用当一个函数作为对象的方法被调用时，this指向该对象。

例如：```var obj = {na 'Tom',sayNa function() {console.log();}};obj.sayName(); // 输出 'Tom'```在这个例子中，sayName()函数被obj对象调用，因此this指向obj对象，输出结果为'Tom'。

2.作为函数调用当一个函数被直接调用时，this指向全局对象。

例如：```function sayName() {console.log();}var name = 'Tom';sayName(); // 输出 'Tom'```在这个例子中，sayName()函数被直接调用，没有任何对象调用它，因此this指向全局对象，输出结果为'Tom'。

需要注意的是，在严格模式下，当一个函数被直接调用时，this指向undefined，而不是全局对象。

浅谈JavaScript中的this

浅谈JavaScript中的thisthis涉及⾯试题：如何正确判断 this？箭头函数的 this 是什么？this是很多⼈会混淆的概念，但是其实它⼀点都不难，只是⽹上很多⽂章把简单的东西说复杂了。

在这⼀⼩节中，你⼀定会彻底明⽩this这个概念的。

我们先来看⼏个函数调⽤的场景function foo() {console.log(this.a)}var a = 1foo()const obj = {a: 2,foo: foo}obj.foo()const c = new foo()接下来我们⼀个个分析上⾯⼏个场景对于直接调⽤foo来说，不管foo函数被放在了什么地⽅，this⼀定是window对于obj.foo()来说，我们只需要记住，谁调⽤了函数，谁就是this，所以在这个场景下foo函数中的this就是obj对象对于new的⽅式来说，this被永远绑定在了c上⾯，不会被任何⽅式改变this说完了以上⼏种情况，其实很多代码中的this应该就没什么问题了，下⾯让我们看看箭头函数中的thisfunction a() {return () => {return () => {console.log(this)}}}console.log(a()()())⾸先箭头函数其实是没有this的，箭头函数中的this只取决包裹箭头函数的第⼀个普通函数的this。

在这个例⼦中，因为包裹箭头函数的第⼀个普通函数是a，所以此时的this是window。

另外对箭头函数使⽤bind这类函数是⽆效的。

最后种情况也就是bind这些改变上下⽂的 API 了，对于这些函数来说，this取决于第⼀个参数，如果第⼀个参数为空，那么就是window。

那么说到bind，不知道⼤家是否考虑过，如果对⼀个函数进⾏多次bind，那么上下⽂会是什么呢？let a = {}let fn = function () { console.log(this) }fn.bind().bind(a)() // => ?如果你认为输出结果是a，那么你就错了，其实我们可以把上述代码转换成另⼀种形式// fn.bind().bind(a) 等于let fn2 = function fn1() {return function() {return fn.apply()}.apply(a)}fn2()可以从上述代码中发现，不管我们给函数bind⼏次，fn中的this永远由第⼀次bind决定，所以结果永远是window。

深入理解JS函数中this指针的指向

深⼊理解JS函数中this指针的指向函数在执⾏时，会在函数体内部⾃动⽣成⼀个this指针。

谁直接调⽤产⽣这个this指针的函数，this就指向谁。

怎么理解指向呢，我认为指向就是等于。

例如直接在js中输⼊下⾯的等式：console.log(this===window);//true情况不同，this指向的对象也不同。

例如：1. 函数声明的情况var bj=10;function add(){var bj=20;console.log(this);//windowconsole.log(this.bj);//10console.log(bj);//20console.log(this.bj+bj);//30}add();window.add();（1）执⾏了add（）之后，此时的this指向的是window对象，为什么呢？因为这时候add是全局函数，是通过window直接调⽤的。

所以下⾯我专门写了个window.add()就是为了说明，全局函数的this都是指向的window。

（2）就像alert（）⾃带的警告弹窗⼀样,window.alert（）执⾏之后也是⼀样的效果。

所以只要是 window点这种调⽤⽅式都可以省略掉，因此警告弹窗可以直接使⽤alert（）。

2. 函数表达式var bj=10;var zjj=function(){var bj=30;console.log(this);//windowconsole.log(this.bj);//10console.log(bj);//30console.log(this.bj+bj);//40}console.log(typeof zjj);//functionzjj();window.zjj();（1）执⾏了zjj（）之后，函数中的this也是指向window对象。

原因和第⼀个是⼀样的，都是通过window这个对象直接调⽤。

3. 函数作为对象的属性去调⽤------例⼀var bj=10;var obj={name:"⼋戒",age:"500",say:function(){var bj=40;console.log(this);//就是obj这个对象console.log(this.bj);//undefinedconsole.log();//⼋戒}}obj.say();window.obj.say();（1）当obj.say（）被执⾏的时候，此时的this指向的是 obj 这个对象，为什么呢？因为say函数是通过obj这个对象直接调⽤的。

浅谈如何深入学习Javascript中的this关键字

浅谈如何深入学习Javascript中的this关键字理解thisthis是一个与执行上下文(execution context，也就是作用域)相关的特殊对象。

因此,它可以叫作上下文对象(也就是用来指明执行上下文是在哪个上下文中被触发的对象)。

任何对象都可以做为上下文中的this的值。

在一些对ECMAScript执行上下文和局部this的描述中的所产生误解。

this 经常被错误的描述成是变量对象的一个属性。

再重复一次：this是执行上下文的一个属性,而不是变量对象的一个属性。

这个特性非常重要,因为与变量相反,this从不会参与到标识符解析过程。

换句话说,在代码中当访问this的时候,它的值是直接从执行上下文中获取的,并不需要任何作用域链查找。

this的值只在进入上下文的时候进展一次确定。

代码如下:hasOwnProperty：是用来判断一个对象是否有你给知名称的属性或对象。

不过需要注意的是，此方法无法检查该对象的原型链中是否具有该属性，该属性必须是对象本身的一个成员。

不知道看官们心里的答案是什么，正确的答案是true,false。

代码如下:要弄明白为什么是这样，就必须要理解上面this所扮演的角色，所指代的对象。

在《javascript语言精粹》一书中，指出了在javascript中一共有四种调用模式：1.方法调用模式2.函数调用模式3.构造器调用模式4.apply调用模式而在这些模式当中，对于如何初始化关键参数this上是存在不同差异的。

方法调用模式当一个函数被保存为对象的一个属性时，我们称它为一个方法。

当一个方法被调用时，this被绑定到该对象。

注意加粗的这句是重点：代码如下:// 创立myObject。

它有一个value属性和一个increment方法这里，方法increment可以使用this去访问myObject对象，所以可以改变value的值。

而且，this到对象的绑定发生在调用的时候。

JavaScript中this详解

JavaScript中this详解都说 JavaScript 是⼀种很灵活的语⾔，这其实也可以说它是⼀个混乱的语⾔。

它把函数式编程和⾯向对象编程糅合⼀起，再加上动态语⾔特性，简直强⼤⽆⽐（其实是不能和C++⽐的，^_^ ）。

这⾥的主题是 this ，不扯远了。

this 本⾝原本很简单，总是指向类的当前实例，this 不能赋值。

这前提是说 this 不能脱离类/对象来说，也就是说 this 是⾯向对象语⾔⾥常见的⼀个关键字。

说的极端点，如果你编写的 JS 采⽤函数式写法，⽽不是⾯向对象式，你所有的代码⾥ this 会少很多，甚⾄没有。

记住这⼀点，当你使⽤ this 时，你应该是在使⽤对象/类⽅式开发，否则this 只是函数调⽤时的副作⽤。

JS ⾥的 this在 function 内部被创建指向调⽤时所在函数所绑定的对象（拗⼝）this 不能被赋值，但可以被 call/apply 改变以前⽤ this 时经常担⼼，不踏实，你不知道它到底指向谁？这⾥把它所有⽤到的地⽅列出this 和构造器this 和对象this 和函数全局环境的 thisthis 和 DOM/事件this 可以被 call/apply 改变ES5 中新增的 bind 和 thisES6 箭头函数(arrow function) 和 this1. this 和构造器this 本⾝就是类定义时构造器⾥需要⽤到的，和构造器在⼀起再⾃然不过。

/*** 页签** @class Tab* @param nav {string} 页签标题的class* @param content {string} 页⾯内容的class**/function Tab(nav, content) {this.nav = navthis.content = content}Tab.prototype.getNav = function() {return this.nav;};Tab.prototype.setNav = function(nav) {this.nav = nav;};Tab.prototype.add = function() {};按照 JavaScript 的习惯， this 应该挂属性/字段，⽅法都应该放在原型上。

详解javascript中this的工作原理

详解javascript中this的⼯作原理在 JavaScript 中 this 常常指向⽅法调⽤的对象，但有些时候并不是这样的，本⽂将详细解读在不同的情况下 this 的指向。

⼀、指向 window：在全局中使⽤ this，它将会指向全局对象，因为浏览器中运⾏的 JavaScript 的全局对象默认为 window，所以，此时 this 指向 window。

例如：console.log(this) // 控制台将打印出 window 对象在全局作⽤域内的函数调⽤， this 也会执⾏ window。

function foo(){console.log(this);};foo(); // 控制台也会打印出 window 对象此处并不难理解，因为全局对象默认为 window，则 foo() 实质是 window.foo()。

其实，在javascript中函数调⽤时，this都会指向window对象。

看下⾯的执⾏结果：function foo(){console.log(this);};var demo = document.querySelector(".demo");demo.onclick = foo; //this指向demo元素对象demo.onclick = function(){foo(); //this指向window对象};注意：在 ES5 中，使⽤严格模式时，不存在全局变量，此时 this 将不再指向 window，⽽是 undefined 。

⼆、指向⽅法调⽤的对象：在对象的⽅法调⽤中，this 指向该⽅法调⽤的对象。

var obj = {getMe: function(){console.log(this)}};obj.getMe(); // 控制台打印出 obj 对象三、构造函数内，指向调⽤构造函数所创建的对象实例：通常我们会使⽤ new 关键词调⽤构造函数创建新的对象实例，此时构造函数内的 this 就会指向这个新创建出来的对象。

js中this的理解

js中this的理解关于thisthis并不是指向函数本⾝。

this在任何情况下都不指向函数的词法作⽤域。

this是在运⾏时进⾏绑定的，⽽并不是在编写时绑定，它的上下⽂取决于函数调⽤时的各种条件。

this的绑定和函数声明的位置没有任何关系，只取决与函数的调⽤⽅法。

this的绑定规则this到底绑定或者引⽤的是哪个对象环境决定于函数被调⽤的地⽅。

⽽函数的调⽤有不同的⽅式，在不同的⽅式中调⽤决定this引⽤的是哪个对象是由四种规则确定的。

1、默认绑定这条规则是最常见的，也是默认的。

当函数被单独定义和调⽤的时候，应⽤的规则就是绑定全局变量window（严格模式下是undefined）。

即没有其他绑定规则存在时的默认规则。

function fn() {console.log( this.a );}var a = 2;fn(); // 2 -- fn单独调⽤，this引⽤window为什么说这⾥应⽤了默认绑定呢？因为fn()是直接使⽤不带任何修饰的函数引⽤进⾏调⽤的，因此只能使⽤默认绑定，⽆法应⽤其他规则。

2、隐式绑定隐式调⽤的意思是，函数调⽤时拥有⼀个上下⽂对象，就好像这个函数是属于该对象的⼀样。

必须在⼀个对象内部包含⼀个指向函数的属性，并通过这个属性间接引⽤函数，从⽽把this间接（隐式）绑定到这个对象上。

function fn() {console.log( this.a );}var obj = {a: 2,fn: fn};obj.fn(); // 2 -- this引⽤obj。

当函数引⽤有上下⽂对象时，隐式绑定规则会把函数调⽤中的this绑定到这个上下⽂对象。

需要说明的⼀点是，最后⼀个调⽤该函数的对象是传到函数的上下⽂对象，对象属性引⽤链中只有上⼀层或者说最后⼀层在调⽤位置中起作⽤，如下：function fn() {console.log( this.a );}var obj2 = {a: 42,fn: fn};var obj1 = {a: 2,obj2: obj2};obj1.obj2.fn(); // 42 -- this引⽤的是obj2.如果⼀个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调⽤，this指向的也只是它上⼀级的对象隐式丢失问题：被隐式绑定的函数会丢失绑定对象，也就是说它会默认绑定，从⽽把this绑定到全局对象或undefined上，取决于是否是严格模式。

理解javascript的this指向问题

理解javascript的this指向问题this是javascript中最常⽤到的关键词之⼀， javascript中this对象的指向问题是⼀个很重要的问题，理解并正确使⽤它是⼀个javascript开发者必须具备的能⼒。

this 实际上是在函数被调⽤时发⽣的绑定，它指向什么完全取决于函数在哪⾥被调⽤。

调⽤位置在理解 this 的绑定过程之前，⾸先要理解调⽤位置:调⽤位置就是函数在代码中被调⽤的位置(⽽不是声明的位置)。

只有仔细分析调⽤位置才能回答这个问题:这个 this 到底引⽤的是什么?最重要的是要分析调⽤栈(就是为了到达当前执⾏位置所调⽤的所有函数)。

我们关⼼的调⽤位置就在当前正在执⾏的函数的前⼀个调⽤中。

调⽤栈可以想象成⼀个函数调⽤链，在浏览器的调试⼯具中可以打断点来查看当前断点的调⽤栈信息可以看到当前调⽤栈的位置在foo,下个调⽤位置是bar,在当前的调⽤环境下this 默认指向了windows对象。

绑定规则我们来看看在函数的执⾏过程中调⽤位置如何决定 this 的绑定对象。

你必须找到调⽤位置，然后判断需要应⽤下⾯四条规则中的哪⼀条。

我们⾸先会分别解释这四条规则，然后解释多条规则都可⽤时它们的优先级如何排列。

默认绑定⾸先要介绍的是最常⽤的函数调⽤类型:独⽴函数调⽤。

可以把这条规则看作是⽆法应⽤其他规则时的默认规则。

function foo() {console.log(this.a);}var a = 2;foo(); // 2声明在全局作⽤域中的变量(⽐如 var a = 2)就是全局对象的⼀个同名属性。

它们本质上就是同⼀个东西，并不是通过复制得到的。

当调⽤ foo() 时，this.a 被解析成了全局变量a。

因为函数调⽤时应⽤了 this 的默认绑定，因此 this 指向全局对象。

那么我们怎么知道这⾥应⽤了默认绑定呢?可以通过分析调⽤位置来看看 foo() 是如何调⽤的。

在代码中，foo() 是直接使⽤不带任何修饰的函数引⽤进⾏调⽤的，其调⽤栈是处在全局作⽤域中，因此只能使⽤默认绑定，⽆法应⽤其他规则。

js中this的用法

js中this的用法
js中的this经常被称为难以理解的一个语法特性，甚至有些开发者还认为它是一个“陷阱”。

事实上，this关键字实际上非常容易理解，可以借助简单的知识就能把它们弄清楚。

首先，在了解js中this的用法之前，需要理解几个概念，即函数作用域、权限控制和闭包。

这些概念对理解this的用法很重要，因为它们是this的重要依据。

其次，this的用法可以分为三种情况。

第一种是普通函数，在普通函数中this指的是全局对象；第二种是构造函数，在构造函数中this指的是实例对象；第三种是箭头函数，在箭头函数中，this 指的是外部作用域中的this。

此外，还需要注意的是this的修饰符，包括call、apply和bind 等。

它们的作用是修改this的指向，对this的指向有一定的影响。

最后，要说明的是，在实际开发中，很多时候需要注意this的指向，只有理解了this的用法，才能编写出高效及错误的代码。

总之，js中的this关键字很重要，它不仅能够用来控制函数的权限，也能用来表示不同对象，因此理解js中this的用法是十分必要的。

只有充分理解了this的用法，才能正确使用它，从而更好地实现功能。

- 1 -。