javascript this详细介绍


Posted in Javascript onSeptember 19, 2016

this的值是在运行时确定的

JS中的this究竟代表什么,这是在程序运行时根据上下文环境确定,可以分为以下几种情况。

1. 全局作用域中的this

在全局作用域中,this指向window对象。

console.log(this);//指向window对象

this.x = 5//在全局作用域内创建一个x
//与this.x = 5的等价情况:
//var x = 5;
//x = 5;

在全局作用域中执行var x=5,其实是为window对象创建一个属性x,并令其等于5。

若定义变量时不加var,JS会认为该变量为全局变量,会将其当作window对象的属性。

2. 函数中的this

JS中函数有两种,直接调用的函数称为普通函数,通过new创建对象的函数称为构造函数。

2.1 构造函数中的this

构造函数的this指向它所创建的对象,如:

function Person(name){
  this.name = name;//this指向该函数创建的对象person
}
var person = new Person("chaimm");

2.2 普通函数中的this

普通函数的this指向window对象。
若上述例子,直接执行Perosn函数,则其中this代表window对象,因此该函数执行后会创建一个全局的name。

function Person(name){
  this.name = name;//this指向window
}
Person("chai");//当作普通函数执行,this指向window对象

3. 对象中的this

对象中的this指向当前对象,如:

var person = {
  name : "chaimm",
  getName : function(){
    return this.name;
  }
}

上述代码中this指向函数getName所属的对象。

但是,如果一个对象的函数中又嵌套了一个函数,这个函数的this指向的却是window,而并不是其外层的对象。

var person = {
  name : "chaimm",
  setName : function(name){
    (function(name){
      this.name = name; //此时this并不代表person对象,而是代表window对象
    })(name);
  }
}

上述示例中,person对象中有一个getName函数,而getName函数内部又有一个函数,这个函数内部的this指向window对象,而非person对象,这是JS的一个bug!一般作如下处理,规避这个bug:

var person = {
  name : "chaimm",
  setName : function(name){
    var thar = this;//将this赋给that
    (function(name){
      that.name = name;//此时that指向person对象
    })(name);
  }
}

我们在person对象的第一层函数中,将this赋给局部变量that,然后在第二层函数中使用that,此时that指向person对象,可对person的属性进行操作。

注意:若将一个对象中的函数赋给一个变量后,再通过该变量调用这个函数,此时该函数中的this指向window,而非该对象,如下所示:

var person = {
  name : "chaimm",
  getName : function(){
    return this.name;
  }
}

//将getName函数赋给一个新的变量
var newGetName = person.getName;
//通过新的变量调用这个函数,这个函数中的this将指向window
newGetName();//若全局作用域中没有name,则将返回undefined

4. 用call和apply函数给this开挂

这两个函数都能手动指定被调用函数内部的this指向哪个对象。

//定义一个构造函数
var Person = function(name){
  this.name = "";
  this.setName = function(name){
    this.name = name;
  }
}

//创建两个对象
var personA = new Person("A");
var personB = new Person("B");

//使用personA的setName函数去修改personB的name属性
personA.setName.apply(personB,["C"]);

apply用法

对象A.函数名.apply(对象B, 参数列表);
当对象B作为apply的第一个参数传给apply时,对象A的函数中this就指向了对象B,此时对象A的该函数对this的操作将会作用在对象B上,由此实现了用对象A去调用对象B的函数。

以上就是对javascript this的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
Jquery css函数用法(判断标签是否拥有某属性)
May 28 Javascript
jquery Mobile入门—外部链接切换示例代码
Jan 08 Javascript
js原生appendChild的bug解决心得分享
Jul 01 Javascript
JavaScript中几种排序算法的简单实现
Jul 29 Javascript
jquery实现标题字体变换的滑动门菜单效果
Sep 07 Javascript
springMVC结合AjaxForm上传文件
Jul 12 Javascript
关于数据与后端进行交流匹配(点亮星星)
Aug 03 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
Feb 14 Javascript
Vue多种方法实现表头和首列固定的示例代码
Feb 02 Javascript
微信小程序控制台提示warning:Now you can provide attr "wx:key" for a "wx:for" to improve performance解决方法
Feb 21 Javascript
通过微信公众平台获取公众号文章的方法示例
Dec 25 Javascript
Openlayers学习之加载鹰眼控件
Sep 28 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
Sep 19 #Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
Sep 19 #Javascript
javascript 判断页面访问方式电脑或者移动端
Sep 19 #Javascript
详解Node.Js如何处理post数据
Sep 19 #Javascript
React Native实现简单的登录功能(推荐)
Sep 19 #Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
Sep 19 #Javascript
BootStrap入门教程(二)之固定的内置样式
Sep 19 #Javascript
You might like
发布一个用PHP fsockopen写的HTTP下载的类
2007/02/22 PHP
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
CodeIgniter框架过滤HTML危险代码
2014/06/12 PHP
thinkPHP5框架分页样式类完整示例
2018/09/01 PHP
PHP-FPM和Nginx的通信机制详解
2019/02/01 PHP
js两行代码按指定格式输出日期时间
2011/10/21 Javascript
javascript日期对象格式化为字符串的实现方法
2014/01/14 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
2015/08/07 Javascript
详解Vue.js搭建路由报错 router.map is not a function
2017/06/27 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
2019/06/24 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
2019/09/01 Javascript
VScode格式化ESlint方法(最全最好用方法)
2019/09/10 Javascript
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
Python实例分享:快速查找出被挂马的文件
2014/06/08 Python
Python的Flask框架中Flask-Admin库的简单入门指引
2015/04/07 Python
浅谈tensorflow中几个随机函数的用法
2018/07/27 Python
eclipse创建python项目步骤详解
2019/05/10 Python
Python configparser模块配置文件过程解析
2020/03/03 Python
深入了解Python 变量作用域
2020/07/24 Python
Python2及Python3如何实现兼容切换
2020/09/01 Python
5 个强大的HTML5 API 函数推荐
2014/11/19 HTML / CSS
HTML5之消息通知的使用(Web Notification)
2018/10/30 HTML / CSS
介绍一下mysql的日期和时间函数
2013/03/28 面试题
歌唱比赛获奖感言
2014/01/21 职场文书
在校大学生个人的自我评价
2014/02/13 职场文书
教师应聘自荐信范文
2014/03/14 职场文书
祖国在我心中的演讲稿
2014/05/04 职场文书
注册资产评估专业求职信
2014/07/16 职场文书
网络文明传播志愿者活动方案
2014/08/20 职场文书
2014年学习全国道德模范事迹思想汇报
2014/09/15 职场文书
村长党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2016年“抗战胜利纪念日”71周年校园广播稿
2015/12/18 职场文书
2016年师德学习心得体会
2016/01/12 职场文书
Mysql Show Profile
2021/04/05 MySQL
深入浅析python3 依赖倒置原则(示例代码)
2021/07/09 Python
SQL Server中的逻辑函数介绍
2022/05/25 SQL Server