首页 > web前端 > js教程 > 正文

实例解析Js中的this

不言
发布: 2018-04-10 14:17:49
原创
1430 人浏览过

本篇文章给大家分享的内容是关于实例解析Js中的this,有需要的朋友可以参考一下


零 从一个例子说起


前几天在看面试题的时候看到了这样一段程序:

obj = {
  name: 'a',
  getName: function () {
    console.log(this.name);
  }
};

var fn = obj.getName;obj.getName();fn();
登录后复制

要求问题是这里fn()执行的结果和执行时this的指向问题。下面结合这个例子与其中的疑问重新总结一下this的使用。

一 this的执行环境

this的指向要根据其执行环境来决定,主要有以下几种情况:

1 全局上下文环境

全局环境即在任何函数的外部,使用this,则this都指代全局对象。如在浏览器中:

this === window    // true
登录后复制

2 函数上下文环境

在函数上下文环境,即函数内部调用使用this,要取决于this的调用方式。

2.1 简单调用

在简单调用时,函数中的this指向全局对象,比如:

function myFun() {
   console.log(this === window);
}

myFun();    // true
登录后复制

上面这个例子中直接调用了函数myFun,其中的this就等于全局对象window
其中的原理就是在声明myFun这一函数时,它作为全局对象的一个属性存在。所以直接使用此函数时,即相当于调用了window.myFun(),即其作为window的属性被调用时this即指向window

在浏览器中调试一下这段程序能更清楚的验证:
这里写图片描述

2.2 作为对象的方法

当函数作为对象的方法被调用时,其this即指向这个对象。以一开始的例子来说,其执行obj.getName()时,函数中的this即指向了obj这个对象。所以输出a
但是当我们将这个函数单独分离开,把一开始的例子改变一下:

function myFun() {
  console.log(this.name);
}var obj = {
  name: 'a',
  getName: myFun
};

obj.getName();    // avar obj2 = {
  name: 'b',
  fun: myFun
};

obj2.fun();   // b
登录后复制

从这个例子可以看出,this的指向完全取决于最靠近的成员引用,将函数绑定在哪个对象,哪个引用上,则this就有不同的指向。在上例中我们将带有this的函数分别绑定到了不同的对象上作为其方法,则其this对应着便绑定到不同的对象上,this.name的值便不同。
同理,当我们直接执行myFun()时,此函数即作为全局对象window的一个属性来调用。所以找不到myName属性,输出undefined(因为全局对象window有默认属性name为空字符串,此处使用myName作为例子)

function myFun() {
  console.log(this.myName);
}
myFun();    // undefined
登录后复制

最后,解释一开始的例子,将obj.getName赋值给了fn,所以,执行fn时即相当于执行了window.fn(),即这个一开始初始化为obj的属性的匿名函数被绑定到了windowfn属性上,所以其this指向window
windowname属性为空字符串,所以输出为空。

相关推荐:

详解javascript中this属性

深入理解javascript中this指针

以上是实例解析Js中的this的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板