JavaScript中的this基本问题实例小结


Posted in Javascript onMarch 09, 2020

本文实例讲述了JavaScript中的this基本问题.分享给大家供大家参考,具体如下:

在函数中 this 到底取何值,是在函数真正被调用执行的时候确定下来的,函数定义的时候确定不了。

执行上下文环境 :

 **定义**:执行函数的时候,会产生一个上下文的对象,里面保存变量,函数声明和this。

 **作用**:用来保存本次运行时所需要的数据

当你在代码中使用了 this,这个 this 的值就直接从执行的上下文中获取了,而不会从作用域链中搜寻。

关于 this 的取值,大体上可以分为以下几种情况:

情况一:全局 & 调用普通函数

在全局环境中,this 永远指向 window。

console.log(this === window);   //true

普通函数在调用时候(注意不是构造函数,前面不加 new),其中的 this 也是指向 window。

但是如果在严格模式下调用的话会报错:

var x = 1;
function first(){
  console.log(this);   // undefined
  console.log(this.x);  // Uncaught TypeError: Cannot read property 'x' of undefined
}
first();

情况二:构造函数

所谓的构造函数就是由一个函数 new 出来的对象,一般构造函数的函数名首字母大写,例如像 Object,Function,Array 这些都属于构造函数。

function First(){
  this.x = 1;
  console.log(this);  //First {x:1}
}
var first = new First();
console.log(first.x);   //1

上述代码,如果函数作为构造函数使用,那么其中的 this 就代表它即将 new 出来的对象。

但是如果直接调用 First函数,而不是 new First(),那就变成情况1,这时候 First() 就变成普通函数。

function First(){
  this.x =1;
  console.log(this);  //Window
}
var first = First();
console.log(first.x);   //undefined

情况三:对象方法

如果函数作为对象的方法时,方法中的 this 指向该对象。

var obj = {
  x: 1,
  first: function () {
    console.log(this);    //Object
    console.log(this.x);   //1
  }
};
obj.first();

注意:若是在对象方法中定义函数,那么情况就不同了。

var obj = {
  x: 1,
  first: function () {
    function second(){
      console.log(this);   //Window
      console.log(this.x);  //undefined
    }
    second();
  }
}
obj.first();

可以这么理解:函数 second虽然是在 obj.first 内部定义的,但它仍然属于一个普通函数,this 仍指向 window。

在这里,如果想要调用上层作用域中的变量 obj.x,可以使用 self 缓存外部 this 变量。

var obj = {
  x:1,
  first: function () {
    var self = this;
    function second(){
      console.log(self);   //{x: 1}
      console.log(self.x);  //1
    }
    second();
  }
}
obj.first();

如果 first 函数不作为对象方法被调用:

var obj = {
  x: 1,
  first: function () {
    console.log(this);    //Window
    console.log(this.x);   //undefined
  }
};
var fn = obj.first;
fn();

obj.first 被赋值给一个全局变量,并没有作为 obj 的一个属性被调用,那么此时 this 的值是 window。

情况四:构造函数 prototype 属性

function First(){
  this.x = 1;
}
First.prototype.getX = function () {
  console.log(this);    //First {x: 1, getX: function}
  console.log(this.x);   //1
}
var first= new First();
first.getX();

在 First.prototype.getX 函数中,this 指向的first 对象。不仅仅如此,即便是在整个原型链中,this 代表的也是当前对象的值。

情况五:函数用 call

var obj = {
  x:1
}
function first(){
  console.log(this);   //{x: 1}
  console.log(this.x);  //1
}
first.call(obj);

当一个函数被 call调用时,this 的值就取传入的对象的值。

来源:知乎

链接:https://zhuanlan.zhihu.com/p/25294187?utm_source=com.youdao.note&utm_medium=social

感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具:http://tools.3water.com/code/WebCodeRun测试上述代码运行效果。

更多关于JavaScript相关内容还可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
不一样的文字闪烁 轮番闪烁
Nov 11 Javascript
Javascript学习笔记-详解in运算符
Sep 13 Javascript
js 火狐下取本地路径实现思路
Apr 02 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
Aug 13 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
Sep 24 Javascript
jQuery中:contains选择器用法实例
Dec 30 Javascript
Vue中$refs的用法详解
Jun 24 Javascript
react 父子组件之间通讯props
Sep 08 Javascript
微信小程序常见页面跳转操作简单示例
May 01 Javascript
JavaScript中的函数式编程详解
Aug 22 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
Nov 13 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
Nuxt页面级缓存的实现
Mar 09 #Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 #Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
Mar 09 #Javascript
前端深入理解Typescript泛型概念
Mar 09 #Javascript
js实现无缝轮播图效果
Mar 09 #Javascript
js实现无缝轮播图
Mar 09 #Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
Mar 09 #Javascript
You might like
php中 $$str 中 "$$" 的详解
2015/07/06 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
常用js脚本
2006/12/03 Javascript
js自带函数备忘 数组
2006/12/29 Javascript
javascript利用初始化数据装配模版的实现代码
2010/11/17 Javascript
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
JS写的贪吃蛇游戏(个人练习)
2013/07/08 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
2014/10/16 Javascript
JavaScript中的对象序列化介绍
2014/12/30 Javascript
jquery获取多个checkbox的值异步提交给php
2015/07/07 Javascript
jQuery Validation Plugin验证插件手动验证
2016/01/26 Javascript
探索angularjs+requirejs全面实现按需加载的套路
2016/02/26 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
深入理解JavaScript中的浮点数
2016/05/18 Javascript
javascript类型系统——undefined和null全面了解
2016/07/13 Javascript
nodejs使用express创建一个简单web应用
2017/03/31 NodeJs
利用ES6实现单例模式及其应用详解
2017/12/09 Javascript
vue 中引用gojs绘制E-R图的方法示例
2018/08/24 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
2019/07/31 Javascript
js消除图片小游戏代码
2019/12/11 Javascript
基于js判断浏览器是否支持webGL
2020/04/18 Javascript
[02:38]DOTA2亚洲邀请赛 IG战队巡礼
2015/02/03 DOTA
[02:10]2018DOTA2亚洲邀请赛赛前采访-Liquid
2018/04/03 DOTA
python获取代理IP的实例分享
2018/05/07 Python
Python 类的特殊成员解析
2018/06/20 Python
印度第一网上礼品店:IGP.com
2020/02/06 全球购物
护士自我鉴定怎么写
2014/02/07 职场文书
品质管理部岗位职责范文
2014/03/01 职场文书
计算机应用专业毕业生求职信
2014/06/03 职场文书
班级文化标语
2014/06/23 职场文书
2014教师党员自我评议总结
2014/09/19 职场文书
2014年售后服务工作总结
2014/11/18 职场文书
班级联欢会主持词
2015/07/03 职场文书
交通安全教育心得体会
2016/01/15 职场文书
MySQL删除和插入数据很慢的问题解决
2021/06/03 MySQL