JS this指向

首先,请牢记以下三点
1. this指向的,只可能是对象!
2.this指向谁,不取决于this写在哪!而是取决于函数在哪里进行调用。
3.this指向的对象,称之为函数的上下文context,也叫函数的调用者。
看一下具体的情况

1.通过函数名直接调用:this指向window

function funA(){
    console.log(this);
 }
 // 通过函数名直接调用:this指向window
funA(); // this--->window
通过函数名直接调用

2.函数作为某个数组中的一个元素,通过数组下标进行调用:this指向这个数组,以上面的函数为例。

function funA(){
    console.log(this);
 }
var arr = [funA,1,2,3];
arr[0]();  // this--->arr
通过数组下标进行调用

3.通过对象.函数名调用的:this指向这个对象

function funA() {
   console.log(this)
}
var obj = {
   name: "obj",
   funA: funA
};
obj.funA(); // this--->obj
通过对象进行调用

4.通过DOM事件进行的调用,this指向页面中调用它的元素

假设页面中有一个id为div的元素

var div = document.getElementById('div')
div.onclick = function () {
    console.log(this)
}
事件进行的调用

5.函数作为window内置函数的回调函数调用:this指向window( 如setInterval setTimeout 等)

function funA() {
    console.log(this)
}
setTimeout(funA,1000);// this--->window
回调函数调用

6.函数作为构造函数,用new关键字调用时:this指向新new出的函数。

function funA() {
    this.name = 'funA'
    console.log(this.name)
 }
var obj = {
    name:'name',
    fun:new funA(),
}
console.log(obj)
new关键字

上面是本人对于this指向的一些理解,如有错误或不足,望指出。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • var 作用域 先来看个简单的例子: 直觉地,内部函数可以访问外部函数的变量,外部不能访问内部函数的变量。上面的例...
    我讲你思阅读 286评论 0 1
  • this:指的是你的函数执行时所在的环境(作用域) 函数this的指向(箭头函数除外): 谁调用函数,这个this...
    Gino_Li阅读 1,566评论 0 1
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,313评论 0 3
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 4,068评论 0 0
  • this指向调用该函数的对象 在函数中this到底取何值,是在函数真正被调用执行的时候确定的,函数定义的时候确定不...
    神话降临阅读 228评论 0 3