详解JS中的this关键字

筱雪2021-11-18 15:11

  相信 Javascript 中的 this 会使很多同学在工作学习中产生困惑,今天我们详解一下JS中的this关键字。

  this 的指向

  this 是 js 中定义的关键字,它自动定义于每一个函数域内,但是它的指向却让人很迷惑。在实际应用中,this 的指向大致可以分为以下四种情况。

  1.作为普通函数调用

  当函数作为一个普通函数被调用,this 指向全局对象。在浏览器里,全局对象就是 window。

window.name = 'linxin';
function getName(){
    console.log(this.name);
}
getName();                   // linxin

  可以看出,此时 this 指向了全局对象 window。在ECMAScript5的严格模式下,这种情况 this 已经被规定不会指向全局对象了,而是 undefined。

'use strict';
function fun(){
    console.log(this);
}
fun();                      // undefined

  2.作为对象的方法调用

  当函数作为一个对象里的方法被调用,this 指向该对象

  var obj = {

    name : 'linxin',
    getName : function(){
        console.log(this.name);
    }
}

obj.getName();              // linxin

  如果把对象的方法赋值给一个变量,再调用这个变量:

 var obj = {

    fun1 : function(){
        console.log(this);
    }
}
var fun2 = obj.fun1;
fun2();                     // window

  此时调用 fun2 方法 输出了 window 对象,说明此时 this 指向了全局对象。给 fun2 赋值,其实是相当于:

var fun2 = function(){
    console.log(this);
}

  可以看出,此时的 this 已经跟 obj 没有任何关系了。这时 fun2 是作为普通函数调用。

  3.作为构造函数调用

  js中没有类,但是可以从构造器中创建对象,并提供了 new 运算符来进行调用该构造器。构造器的外表跟普通函数一样,大部分的函数都可以当做构造器使用。当构造函数被调用时,this 指向了该构造函数实例化出来的对象。

var Person = function(){
    this.name = 'linxin';
}
var obj = new Person();
console.log(obj.name);      // linxin

  如果构造函数显式的返回一个对象,那么 this 则会指向该对象。

var Person = function(){
    this.name = 'linxin';
    return {
        name : 'linshuai'
    }
}
var obj = new Person();
console.log(obj.name);      // linshuai

  如果该函数不用 new 调用,当作普通函数执行,那么 this 依然指向全局对象。

  4.call() 或 apply() 调用

  通过调用函数的 call() 或 apply() 方法可动态的改变 this 的指向。

var obj1 = {
    name : 'linxin',
    getName : function(){
        console.log(this.name);
    }
}
var obj2 = {
    name : 'linshuai'
}

obj1.getName();             // linxin
obj1.getName.call(obj2);    // linshuai
obj1.getName.apply(obj2);   // linshuai

  点击图片领取免费课程!

详解JS中的this关键字

  以上就是小编为大家整理发布的“详解JS中的this关键字”一文,更多相关内容尽在开课吧广场-Web频道。

免责声明:本站所提供的内容均来源于网友提供或网络搜集,由本站编辑整理,仅供个人研究、交流学习使用。如涉及版权问题,请联系本站管理员予以更改或删除。
有用
分享
全部评论快来秀出你的观点
登录 后可发表观点…
发表
暂无评论,快来抢沙发!
云开发实战特训营