JS中this上下文对象使用方式


Posted in Javascript onOctober 09, 2016

JavaScript 有一套完全不同于其它语言的对 this 的处理机制。 在五种不同的情况下 ,this 指向的各不相同。

有句话说得很在理 -- 谁调用它,this就指向谁

一、全局范围内

在全局范围内使用this ,它将指向全局对象(浏览器中为 window)

var name = 'name1';
console.log(name);

this.name = 'name2';
console.log(name);
console.log(this.name);

window.name = 'name3';
console.log(name);
console.log(this.name);
console.log(window.name);

JS中this上下文对象使用方式

二、函数调用

直接调用一个函数,this 默认会指向全局 (浏览器端为window)

var name = 'name1';
function sayName(){
 console.log(name);
 console.log(this);
}

sayName();
window.sayName();

可以看到

JS中this上下文对象使用方式

还有几个常见的情况,根据谁调用方法就指向谁的原则,this的指向要细看

// 全局 name
var name = 'name1';

var obj = {
 name: 'name2',
 sayName: function(){
    // 调用它的时候 this指向全局
  return function(){
   console.log(this.name);
  };
 },
 changeName: function(){
    // 调用它的时候 this指向全局
  setTimeout(function(){
   this.name = 'name3';
  },0);
 }
};

obj.sayName()();
obj.changeName();
setTimeout(function(){
 console.log(name);
 console.log(obj.name);
},0);

JS中this上下文对象使用方式

像这些类似匿名的函数,默认都是被全局(浏览器下的window)对象调用,要正确地让obj调用,就要指代好

可以用that保持this再进行下一步,或者匿名函数传值,或者使用call/apply/bind改变context等

var name = 'name1';

var obj = {
 name: 'name2',
 sayName: function(){
  var that = this;
  return function(){
   console.log(that.name);
  };
 },
 changeName: function(){
  var that = this;
  setTimeout(function(){
   that.name = 'name3';
  },0);
 }
};

obj.sayName()(); // name2
obj.changeName();
setTimeout(function(){
 console.log(name); // name1
 console.log(obj.name); // name3
},0);

三、作为对象方法的调用

其实就类似上头提到的 obj.sayName()  obj.name 等

这时this会指向这个obj 

四、call/apply/bind 的调用

当使用 Function.prototype 上的 call 或者 apply ,bind 方法时,函数内的 this将会被 显式设置为函数调用的第一个参数。

具体使用方法

我们可以稍微修改一下上头的代码,就可以看到this指向的改变

var name = 'name1';

var obj = {
 name: 'name2',
 sayName: function(){
  // 返回一个默认全局的函数
  return function(){
   console.log(this.name);
  };
 },
 changeName: function(){
  // 返回一个默认全局的函数
  setTimeout(function(){
   this.name = 'name3';
  // 然后将该函数绑定给this(当前obj对象)
  }.bind(this),0);
 }
};

// obj.sayName()这个函数,让obj来调用
obj.sayName().call(obj);
// 让this(也就是全局对象)来调用
obj.sayName().apply(this);

obj.changeName();
setTimeout(function(){
 // 输出更改之后,全局name的值
 console.log(name);
 // 输出更改之后,obj对象中 name的值
 console.log(obj.name);
},0);

JS中this上下文对象使用方式

五、作为构造函数调用

比如 new Foo();

先来看个简单的例子:

var name = 'name1';
function Foo(){
 // 赋值this(当前对象)的name属性值
 this.name = 'name2';
}

// new 构造函数产生一个实例
var foo = new Foo();

console.log(name);
console.log(foo.name);

// 直接调用该函数
Foo();
console.log(name);

JS中this上下文对象使用方式

可以看到,如果函数倾向于和 new 关键词一块使用,则我们称这个函数为构造函数,当new 了之后,this则指向这个心创建的对象(这个new 的过程其实也涉及到了继承机制)。

若直接调用这个函数,this就默认执行全局对象了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript延时重复执行函数 lLoopRun.js
Jun 29 Javascript
jquery 获取表单元素里面的值示例代码
Jul 28 Javascript
从数组中随机取x条不重复数据的JS代码
Dec 24 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Oct 05 Javascript
原生js实现查询天气小应用
Dec 09 Javascript
vue中tab选项卡的实现思路
Nov 25 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
Dec 06 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
Jul 20 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
Aug 03 Javascript
JavaScript浅层克隆与深度克隆示例详解
Sep 01 Javascript
让你30分钟快速掌握vue3教程
Oct 26 Javascript
JS 基本概念详细介绍
Oct 16 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
Oct 09 #Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
Oct 09 #Javascript
BootStrap中Table分页插件使用详解
Oct 09 #Javascript
微信小程序 for 循环详解
Oct 09 #Javascript
微信小程序 条件渲染详解
Oct 09 #Javascript
手机浏览器 后退按钮强制刷新页面方法总结
Oct 09 #Javascript
最实用的jQuery分页插件
Oct 09 #Javascript
You might like
一个PHP的QRcode类与大家分享
2011/11/13 PHP
Zend Framework教程之Zend_Config_Xml用法分析
2016/03/23 PHP
PHP给文字内容中的关键字进行套红处理
2016/04/12 PHP
jQuery选择器中含有空格的使用示例及注意事项
2013/08/25 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
2014/08/22 Javascript
js获取页面传来参数的方法
2014/09/06 Javascript
Vue 仿百度搜索功能实现代码
2017/02/16 Javascript
angular.js中解决跨域问题的三种方式
2017/07/12 Javascript
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
2020/02/03 Javascript
Python中实现参数类型检查的简单方法
2015/04/21 Python
python避免死锁方法实例分析
2015/06/04 Python
python实现多线程的两种方式
2016/05/22 Python
Python检测生僻字的实现方法
2016/10/23 Python
Python爬虫DNS解析缓存方法实例分析
2017/06/02 Python
python实现批量修改图片格式和尺寸
2018/06/07 Python
python 输入一个数n,求n个数求乘或求和的实例
2018/11/13 Python
解决Python运行文件出现out of memory框的问题
2018/12/03 Python
Python实现二叉树的常见遍历操作总结【7种方法】
2019/03/06 Python
深入浅析Python 中 is 语法带来的误解
2019/05/07 Python
Python实现微信中找回好友、群聊用户撤回的消息功能示例
2019/08/23 Python
在pandas中遍历DataFrame行的实现方法
2019/10/23 Python
基于Python计算圆周率pi代码实例
2020/03/25 Python
英国最大的汽车交易网站:Auto Trader UK
2016/09/23 全球购物
英国最大的电脑零售连锁店集团:PC World
2016/10/10 全球购物
请说出以下代码输出什么
2013/08/30 面试题
护士演讲稿范文
2014/01/05 职场文书
小组合作学习反思
2014/02/18 职场文书
自强之星事迹材料
2014/05/12 职场文书
2014年纪委工作总结
2014/12/05 职场文书
调解书格式范本
2015/05/20 职场文书
男人帮观后感
2015/06/18 职场文书
先进个人事迹材料(2016推荐版)
2016/03/01 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书
python 远程执行命令的详细代码
2022/02/15 Python
Python+Tkinter打造签名设计工具
2022/04/01 Python