深入理解js中this的用法

 更新时间:2016年05月28日 15:11:57   投稿:jingxian  
下面小编就为大家带来一篇深入理解js中this的用法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

this是js的一个关键字,随着函数使用场合不同,this的值会发生变化。但是总有一个原则,那就是this指的是调用函数的那个对象。

1、纯粹函数调用。

1
2
3
4
5
6
function test() { 
  this.x = 1; 
  alert(x);
}
 
test();

其实这里的this就是全局变量。看下面的例子就能很好的理解其实this就是全局对象Global。其实这里的this就是全局变量。看下面的例子就能很好的理解其实this就是全局对象Global。

1
2
3
4
5
6
7
8
9
10
11
12
var x = 1;
function test() {
  alert(this.x);
}
test();//1
 
var x = 1;
function test() {
  this.x = 0;
}
test();
alert(x);//0

2、作为方法调用,那么this就是指这个上级对象。

1
2
3
4
5
6
7
8
function test() {
  alert(this.x);
}
 
var o = {};
o.x = 1;
o.m = test;
o.m(); //1

3、作为构造函数调用。所谓构造函数,就是生成一个新的对象。这时,这个this就是指这个对象。

1
2
3
4
5
function test() { 
   this.x = 1;
}
var o = new test();
alert(o.x);//1

4、apply调用

1
2
3
4
5
6
7
8
9
10
var x = 0;
function test() {
  alert(this.x);
}
 
var o = {};
o.x = 1;
o.m = test;
o.m.apply(); //0
o.m.apply(o);//1

当apply没有参数时,表示为全局对象。所以值为0。

以上这篇深入理解js中this的用法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

相关文章

  • javascript函数声明和函数表达式区别分析

    javascript函数声明和函数表达式区别分析

    本文向大家展示了javascript中函数声明和函数表达式的概念及区别,介绍的非常全面,也很详尽,这里推荐给大家
    2014-12-12
  • Javascript中的变量使用说明

    Javascript中的变量使用说明

    使用过javascript的朋友都知道,在javascript中,变量的使用是个比较头疼的问题,经常会产生 些比较匪夷所思的结果。究其原因,大多是对javascript的变量相关知识了解得不够透彻。
    2010-05-05
  • javascript日期处理函数,性能优化批处理

    javascript日期处理函数,性能优化批处理

    这篇文章主要介绍了javascript日期处置函数,对批处理做了性能优化,需要的朋友可以参考下
    2015-09-09
  • javascript 中的事件委托详解

    javascript 中的事件委托详解

    这篇文章主要介绍了javascript 中的事件委托详解的相关资料,需要的朋友可以参考下
    2016-10-10
  • 微信小程序访问node.js接口服务器搭建教程

    微信小程序访问node.js接口服务器搭建教程

    这篇文章主要给大家分享了微信小程序访问node.js接口服务器的搭建教程,文中介绍的非常详细,对大家具有一定的参考价值,需要的朋友们下面来跟着小编一起看看吧。
    2017-04-04
  • 了解javascript中的Dom操作

    了解javascript中的Dom操作

    DOM 给我们提供了一些方法,让我们可以使用js来控制页面中的标签等。下面小编和大家来一起学习下吧
    2019-05-05
  • javascript基本类型详解

    javascript基本类型详解

    本文介绍了javascript中的5个原始值(数字,字符,布尔,null,undefined),6个typeo能判断(数字,字符,布尔,object,function,undefined)以及9个原生的内置构造函数,是篇非常不错的文章,这里推荐给大家。
    2014-11-11
  • location.href用法总结(最主要的)

    location.href用法总结(最主要的)

    location.href在使用中很是频繁,接下来为大家详细介绍下location.href主要的使用方法有哪些,感兴趣的朋友可以参考下
    2013-12-12
  • Javascript Object 对象学习笔记

    Javascript Object 对象学习笔记

    这篇文章主要介绍了Javascript Object 对象学习笔记,需要的朋友可以参考下
    2014-12-12
  • Javascript入门学习第四篇 js对象和数组

    Javascript入门学习第四篇 js对象和数组

    上篇文章讲了js中的变量,表达式,和运算符 还有一些 js 语句. 这章我们来探讨js中的对象和数组。
    2008-07-07

最新评论