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 相关文章推荐
JQuery index()方法使用代码
Jun 02 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
Jan 29 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
Jun 20 Javascript
jquery序列化方法实例分析
Jun 10 Javascript
jQuery实现表单步骤流程导航代码分享
Aug 28 Javascript
简要了解jQuery移动web开发的响应式布局设计
Dec 04 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
Jan 14 Javascript
从源码看angular/material2 中 dialog模块的实现方法
Oct 18 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
Feb 05 Javascript
一秒学会微信小程序制作table表格
Feb 14 Javascript
js实现简单分页导航栏效果
Jun 28 Javascript
Node.js操作MongoDB数据库实例分析
Jan 19 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
文件上传程序的全部源码
2006/10/09 PHP
基于命令行执行带参数的php脚本并取得参数的方法
2016/01/25 PHP
浅谈使用 Yii2 AssetBundle 中 $publishOptions 的正确姿势
2017/11/08 PHP
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
2007/08/15 Javascript
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
JQuery+CSS实现图片上放置按钮的方法
2015/05/29 Javascript
js判断主流浏览器类型和版本号的简单实现代码
2016/05/26 Javascript
JavaScript九九乘法口诀表的简单实现
2016/10/04 Javascript
angular5 httpclient的示例实战
2018/03/12 Javascript
webpack中的热刷新与热加载的区别
2018/04/09 Javascript
浅谈Vue 数据响应式原理
2018/05/07 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
2018/08/24 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
2018/09/18 Javascript
记一次webapck4 配置文件无效的解决历程
2018/09/19 Javascript
vue.js中导出Excel表格的案例分析
2019/06/11 Javascript
layer.open回调获取弹出层参数的实现方法
2019/09/10 Javascript
JS+CSS实现3D切割轮播图
2020/03/21 Javascript
vue实现下载文件流完整前后端代码
2020/11/17 Vue.js
原生js实现下拉框选择组件
2021/01/20 Javascript
简单的Python2.7编程初学经验总结
2015/04/01 Python
Python基于pyCUDA实现GPU加速并行计算功能入门教程
2018/06/19 Python
pandas计算最大连续间隔的方法
2019/07/04 Python
Flask框架中request、请求钩子、上下文用法分析
2019/07/23 Python
python多进程 主进程和子进程间共享和不共享全局变量实例
2020/04/25 Python
基于css3的属性transition制作菜单导航效果
2015/09/01 HTML / CSS
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
旅游管理实习自我鉴定
2013/09/29 职场文书
淘宝客服自我总结鉴定
2014/01/25 职场文书
党员群众路线承诺书
2014/05/20 职场文书
党员干部形式主义个人整改措施
2014/09/17 职场文书
乡镇干部个人对照检查材料思想汇报(原创篇)
2014/09/28 职场文书
工作作风整顿个人剖析材料
2014/10/11 职场文书
设立有限责任公司出资协议书
2014/11/01 职场文书
详解Vue slot插槽
2021/11/20 Vue.js