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 相关文章推荐
javascript JSON操作入门实例
Apr 16 Javascript
基于jquery的代码显示区域自动拉长效果
Dec 07 Javascript
让AJAX不依赖后端接口实现方案
Dec 03 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
Dec 12 Javascript
.NET微信公众号开发之创建自定义菜单
Jul 16 Javascript
node.js实现爬虫教程
Aug 25 Javascript
全面理解JavaScript中的闭包
May 12 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
Oct 10 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
Dec 16 Javascript
原生js实现返回顶部缓冲效果
Jan 18 Javascript
vue轮播图插件vue-concise-slider的使用
Mar 13 Javascript
javascript实现点击星星小游戏
Dec 24 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
CI框架中libraries,helpers,hooks文件夹详细说明
2014/06/10 PHP
PHP中__autoload和Smarty冲突的简单解决方法
2016/04/08 PHP
PHP简单留言本功能实现代码
2017/06/09 PHP
thinkPHP利用ajax异步上传图片并显示、删除的示例
2018/09/26 PHP
javascript 必知必会之closure
2009/09/21 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
2013/02/05 Javascript
javascript + jquery实现定时修改文章标题
2014/03/19 Javascript
原生js实现日期联动
2015/01/12 Javascript
jquery插件Jplayer使用方法简析
2016/04/22 Javascript
nodejs读写json文件的简单方法(必看)
2017/03/09 NodeJs
javascript基本数据类型和转换
2017/03/17 Javascript
JS实现搜索关键词的智能提示功能
2017/07/07 Javascript
Javascript调试之console对象——你不知道的一些小技巧
2017/07/10 Javascript
vue监听scroll的坑的解决方法
2017/09/07 Javascript
Angularjs使用过滤器完成排序功能
2017/09/20 Javascript
详解vue中使用express+fetch获取本地json文件
2017/10/10 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
2020/08/03 Javascript
django+js+ajax实现刷新页面的方法
2017/05/22 Python
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
python实现识别手写数字 python图像识别算法
2020/03/23 Python
Python简单计算给定某一年的某一天是星期几示例
2018/06/27 Python
python opencv判断图像是否为空的实例
2019/01/26 Python
Python文件读写常见用法总结
2019/02/22 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
Django框架创建项目的方法入门教程
2019/11/04 Python
python实现高斯投影正反算方式
2020/01/17 Python
Python 实现进度条的六种方式
2021/01/06 Python
CSS3动画之利用requestAnimationFrame触发重新播放功能
2019/09/11 HTML / CSS
致裁判员加油稿
2014/02/08 职场文书
《争吵》教学反思
2014/02/15 职场文书
家长通知书家长评语
2014/04/17 职场文书
全国优秀辅导员事迹材料
2014/05/14 职场文书
学校安全生产承诺书
2014/05/23 职场文书
自我评价优缺点范文
2015/03/11 职场文书
MySQL8.0无法启动3534的解决方法
2021/06/03 MySQL
聊聊Python String型列表求最值的问题
2022/01/18 Python