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 相关文章推荐
js+FSO遍历文件夹下文件并显示
Mar 07 Javascript
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
May 27 Javascript
javascript与CSS复习(《精通javascript》)
Jun 29 Javascript
jquery 操作DOM的基本用法分享
Apr 05 Javascript
jquery select动态加载选择(兼容各种浏览器)
Feb 01 Javascript
微信企业号开发之微信考勤Cookies的使用
Sep 11 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
May 10 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
Sep 01 Javascript
js实现5秒倒计时重新发送短信功能
Feb 05 Javascript
微信小程序 如何引入外部字体库iconfont的图标
Jan 31 Javascript
Vue.js watch监视属性知识点总结
Nov 11 Javascript
vue中defineProperty和Proxy的区别详解
Nov 30 Vue.js
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之第八天
2006/10/09 PHP
php中的数组操作函数整理
2008/08/18 PHP
一步一步学习PHP(3) php 函数
2010/02/15 PHP
php preg_filter执行一个正则表达式搜索和替换
2012/02/27 PHP
解析php中curl_multi的应用
2013/07/17 PHP
在Yii框架中使用PHP模板引擎Twig的例子
2014/06/13 PHP
详解PHP实现执行定时任务
2015/12/21 PHP
PHP常见错误提示含义解释(实用!值得收藏)
2016/04/25 PHP
php mysql获取表字段名称和字段信息的三种方法
2016/11/13 PHP
了解了这些才能开始发挥jQuery的威力
2013/10/10 Javascript
js正则表达exec与match的区别说明
2014/01/29 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
2014/09/01 Javascript
zTree插件下拉树使用入门教程
2016/04/11 Javascript
有关JavaScript中call()和apply() 的一些理解
2016/05/20 Javascript
JavaScript数组合并的多种方法
2016/05/22 Javascript
用vue和node写的简易购物车实现
2017/04/25 Javascript
Form表单上传文件(type="file")的使用
2017/08/03 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
浅谈webpack 四个核心概念之Entry
2019/06/12 Javascript
[01:12:44]VG vs Mineski Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
Python返回真假值(True or False)小技巧
2015/04/10 Python
python 统计列表中不同元素的数量方法
2018/06/29 Python
Python+OpenCV采集本地摄像头的视频
2019/04/25 Python
python提取xml里面的链接源码详解
2019/10/15 Python
美国名牌手表折扣网站:Jomashop
2020/05/22 全球购物
智能室内花园:Click & Grow
2021/01/29 全球购物
Love, Bonito国际官网:新加坡女装品牌
2021/03/13 全球购物
一月红领巾广播稿
2014/02/11 职场文书
同居协议书范本
2014/04/23 职场文书
武当山导游词
2015/02/03 职场文书
单位接收证明格式
2015/06/18 职场文书
个人更名证明
2015/06/23 职场文书
好人好事新闻稿
2015/07/17 职场文书
2019财务管理制度最新范本!
2019/07/09 职场文书
导游词之宁夏贺兰山岩画
2019/11/08 职场文书
浅谈Java实现分布式事务的三种方案
2021/06/11 Java/Android