一、了解this

在面向对象的语言中 this 就是当前对象的一个引用，即当前环境的上下文对象，面向对象语言中 this 表示当前对象的一个引用。在JS中this会随着环境的改变而改变，此所谓世界上唯一不变的就是改变。

二、this指向总结

1、单独使用 this

这种情况应该是最好理解的，this既不在方法中也不再对象中，而是出现在文档的第一层，默认情况下this当然指向当前文档这一对象。（严格模式下依然是指向全局对象）

2、this 在定义的函数中

严格模式下（"use strict"），函数是没有绑定到 this 上的，所以此时使用是 undefined。非严格模式下，函数的所属者默认绑定到 this 上，此时 this 就指向函数的所有者，如果你在全局定义的函数那么 this 就指向全局对象。

// 非严格模式
<script>var name = "xxx";function test() {let name = "yyy";console.log(this.name); // xxxconsole.log(name);      // yyy    //注意：如果函数内部未定义name则会向外寻找， 一直到最上一层，找到则打印，未找到打印 undefined}test1();
</script>// 严格模式
<script>// 开始严格模式"use strict";var name = "xxx";function test() {var name = "yyy";console.log(this.name); // 报错不打印，提示name未定义}test1();
</script>

3、this 在定义的对象方法中

如果 this 出现在对象的方法中，那么当前函数归属于当前的对象，所以函数内的 this 的指向就是当前对象。

<script>
// 开启严格模式
"use strict";var name = "ypf";var person = {name: "John",log: function() {console.log(this.name); // Johnconsole.log(name);      // ypf  // 区别于在函数中的打印}
};this.person.log();  // person.log(); 此时两种写法等效
</script>

这个东西要灵活理解，就比如下面这个例子，对象中的属性的返回值是一个匿名函数，而匿名函数的归属于Windows对象，所以这个例子的匿名函数中的 this 就不指向 person 对象。

<script>// 开启严格模式// "use strict";var name = "ypf";var person = {name: "John",name2: this.name, log: function () {console.log(this.name); // Johnreturn function () {console.log(this.name); // ypf  // 函数返回的是一个匿名函数，而匿名函数归属于Windows对象console.log(name);      // ypf}}};this.person.log()();console.log(person.name2);  // ypf  // 此时 this 就和person的归属对象保持一致
</script>

下面是构造函数的例子，所谓构造函数，就是通过这个函数生成一个新对象，这时，this就指向这个对象，区别于对象中的函数。

<script>var testStr = "ypf";function Demo() {this.testStr = 'gj';this.fun = function() {console.log(this.testStr);}}let a = new Demo();console.log(a.testStr);   // gja.fun()                   // gj</script>

4、显式函数绑定（apply、call、bind ）

显示绑定就不用过多解释了就是指那打那，apply、call、bind 都可以改变 this 的指向，区别在于返回值和第二个参数，大家可以自行百度。

<script>// 开启严格模式// "use strict";var person1 = {fullName: function () {return this.firstName + " " + this.lastName;}}var person2 = {firstName: "李",lastName: "婉莹",}console.log(person1.fullName.call(person2));  // 李婉莹
</script>

三、牛刀小试

实例1 ：腾讯面试题

<script>var x = 20;var a = {x: 15,fn: function () {var x = 30;return function () {return this.x}}}console.log(a.fn());console.log((a.fn())());console.log(a.fn()());console.log(a.fn()() == (a.fn())());console.log(a.fn().call(this));console.log(a.fn().call(a));// 答案// 1.console.log(a.fn());
// 对象调用方法，返回了一个方法。
// # function() {return this.x}// 2.console.log((a.fn())());
// a.fn()返回的是一个函数，()()这是自执行表达式。this -> window
// # 20// 3.console.log(a.fn()());
// a.fn()相当于在全局定义了一个函数，然后再自己调用执行。this -> window
// # 20// 4.console.log(a.fn()() == (a.fn())());
// # true// 5.console.log(a.fn().call(this));
// 这段代码在全局环境中执行，this -> window
// # 20// 6.console.log(a.fn().call(a));
// this -> a
// # 15
</script>

实例2：this指向Foo

<script>function Foo() {getName = function() {alert(1);}return this;}Foo.getName = function() {alert(2);}Foo.prototype.getName = function() {alert(3);}var getName = function() {alert(4);}function getName() {alert(5);}Foo.getName();       // 2getName();           // 4Foo().getName();     // 1 getName();           // 1new Foo().getName(); // 3</script>

实例3：this指向window

</script>function Foo() {var getName = function() {alert(1);}return this;}Foo.getName = function() {alert(2);}Foo.prototype.getName = function() {alert(3);}var getName = function() {alert(4);}function getName() {alert(5);}Foo.getName();          // 2getName();              // 4 Foo().getName();        // 4getName();              // 4new Foo().getName();    // 3
</script>

JavaScript中this的指向总结相关推荐

JAVAscript中的this指向和this指向的修改
JAVAscript中的this指向和this指向的修改 this 关键字一般在函数中使用,表示哪个对象执行了当前函数. 每一个函数内部都有一个关键字是 this . 函数内部的 this 只和函数 ...
$.ligerdialog.open中确定按钮加事件_彻底搞懂JavaScript中的this指向问题
JavaScript中的this是让很多开发者头疼的地方,而this关键字又是一个非常重要的语法点.毫不夸张地说,不理解它的含义,大部分开发任务都无法完成. 想要理解this,你可以先记住以下两点: ...
JavaScript中this的指向问题
this是面向对象语言中一个重要的关键字,理解并掌握该关键字的使用对于我们代码的健壮性及优美性至关重要.而javascript的this又有区别于Java.C#等纯面向对象的语言,这使得this更加扑 ...
理解JavaScript中this的指向详解
this的定义和理解: this是JavaScript语言的一个关键字,它是函数运行时,在函数体内部自动生成的一个对象,只能在函数体内使用. 1.this和执行环境对象有关,和函数的声明无关. var ...
JavaScript中this的指向问题及面试题你掌握了吗？
this 作为JavaScript中的一个关键字,它的复杂度很高,主要原因是它所处不同场景的代表的指向是不一样的.这里先做一个结论,重要事情说三遍: this的指向是由上下文环境动态决定的 this的 ...
JavaScript中this的指向
JavaScript之this指向问题 js中的this指向问题一直不是很清楚,看了coderwhy老师的文章后特此记录一下. this在全局作用域下使用 this在全局作用域下指向的就是window ...
JavaScript中的 this指向问题
以下文章均已附上原文链接 ,侵删文章一:vue中的this指向问题 vue中的this指向问题_JingG459的博客-CSDN博客_vue中this指向问题最近写项目遇到很多this指向的问题, ...
38 JavaScript中的this指向问题
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.函数内this指向问题函数内部的this指向是当我们调用函数的时候确定的.调用方式的 ...
javascript中关于this指向问题详解
前言 LiuDaP 在前端的学习中,我们必然要用到js,js可以说是前端必不可少的的东西.在学习js的过程中,我们会经常用到this这个东西,而this的指向问题就变得尤为重要.今天正好有空闲 ...
JavaScript中this指针指向的彻底理解
this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象这一点与函数中自由变量Action-varibal不同 1 va ...

JavaScript中this的指向总结

一、了解this

二、this指向总结

三、牛刀小试

JavaScript中this的指向总结相关推荐

最新文章

热门文章