您的位置:首页> 前端教程> JS教程
文章导航

JavaScript this详解

2018-10-4 14:30| 作者: admin| 查看: 2261| 评论: 0|来自: 蚂蚁部落

this是JavaScript中无法回避的一个概念,在很多其他编程语言中也是如此。

如果对它没有良好的掌握,那么开发工作将无法进行。

下面通过代码实例对它进行一下详细介绍。

首先看一段极为简单的代码:

[JavaScript] 纯文本查看 复制代码运行代码
var url = "www.softwhy.com";
function func(){
  console.log(url);
}
func();

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/04/143132e81gpeppmyempmem.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码会打印出本站的网址。

首先在函数作用域查找变量url,没有找到,那么在全局作用域查找。

代码修改如下:

[JavaScript] 纯文本查看 复制代码运行代码
var url = "www.softwhy.com";
function func(){
  console.log(this.url);
  console.log(window.url);
  console.log(window===this);
}
func();

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/04/143232c61gl5r4g621g1cc.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面代码中简单演示了this的应用。

this.url与window.url打印值相同,从最后一个打印结果可以看到,this指向window对象。

再来看一段代码实例:

[JavaScript] 纯文本查看 复制代码运行代码
var webName="http://www.softwhy.com";
var ant={
    webName:"蚂蚁部落",
    func:function(){
        console.log(this.webName);
        console.log(this===ant);
    }
}
ant.func()

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/04/143316bnpucllds9zwls8p.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

打印结果是"蚂蚁部落"而不是"http://www.softwhy.com"。

最后一行打印结果是true,说明this指向ant对象。

由此可以总结一下this:

(1).非箭头函数中,this总是指向调用函数的对象。

(2).箭头函数对它内部this的指向做了很大改动,具体参阅JavaScript 箭头函数一章节。

下面再分析几段代码实例以加深对this的理解:

[JavaScript] 纯文本查看 复制代码运行代码
var func=function(){
  this.x=1
}
func();
console.log(x);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/04/143405e8xgzdu8ppfkxk3u.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).声明一个匿名函数并赋值给变量func。

(2).全局变量是window对象的一个属性,也就是说func等同于window.func。

(3).那么func()等同于window.func()。

(4).根据非箭头函数,“this总是指向调用函数的对象”这个原则,那么函数中的this指向window对象,this.x=1等同于window.x=1,所以打印结果是1。

[JavaScript] 纯文本查看 复制代码运行代码
var webName="蚂蚁部落一";
var obj={
    webName:"蚂蚁部落二",
    func:function(){
        console.log(this.webName);
        function test(){
            console.log(this.webName);
        }
        test();
    }
}
obj.func();

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/04/143436kauusdl44wzmzs49.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).obj.func(),这是obj对象调用func,所以func内部的this是指向obj对象的,于是第一个this.webName中的webName是obj对象的属性,打印结果是"蚂蚁部落二"。

(2).test(),凡是没有显式调用的函数,其调用对象都是window对象,所以test中的this指向window对象,又由于全局作用域中声明的变量是window对象的属性,所以打印结果是"蚂蚁部落一"。

5

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (5 人)

最新评论

返回顶部