javaScript中的this示例学习详解及工作原理


Posted in Javascript onJanuary 13, 2014

this的工作原理

如果一个函数被作为一个对象的方法调用,那么this将被指派为这个对象。

var parent = {
    method: function () {
        console.log(this);
    }
};parent.method();
// <- parent

注意这种行为非常“脆弱”,如果你获取一个方法的引用并且调用,那么this的值不会是parent了,而是window全局对象。这让大多数开发者迷惑。

ThisClownCar();
// <- Window
 

改动this

.call、 .apply 和.bind 方法用来操作调用函数的方式,帮我们定义this的值和传递给函数的参数值。

Function.prototype.call 可以有任意数量的参数,第一个参数被分配给this,剩下的被传递给调用函数。

Array.prototype.slice.call([1, 2, 3], 1, 2)
// <- [2]Function.prototype.apply 的行为和.call类似,但它传递给函数的参数是一个数组,而不是任意参数。
String.prototype.split.apply('13.12.02', ['.'])
// <- ['13', '12', '02']
 

Function.prototype.bind 创建一个特殊的函数,该函数将永远使用传递给.bind的参数作为this的值,以及能够分配部分参数,创建原函数的珂里化(curride)版本。

 

var arr = [1, 2];
var add = Array.prototype.push.bind(arr, 3);// effectively the same as arr.push(3)
add();
// effectively the same as arr.push(3, 4)
add(4);
console.log(arr);
// <- [1, 2, 3, 3, 4]

作用域链中的this

在下面的例子,this将无法在作用域链中保持不变。这是规则的缺陷,并且常常会给业余开发者带来困惑。

function scoping () {
  console.log(this);  return function () {
    console.log(this);
  };
}
scoping()();
// <- Window
// <- Window

有一个常见的方法,创建一个局部变量保持对this的引用,并且在子作用域中不能有同命变量。子作用域中的同名变量将覆盖父作用域中对this的引用。http://www.cnblogs.com/sosoft/

function retaining () {
  var self = this;  return function () {
    console.log(self);
  };
}
retaining()();
// <- Window
 

除非你真的想同时使用父作用域的this,以及当前this值,由于某些莫名其妙的原因,我更喜欢是使用的方法.bind函数。这可以用来将父作用域的this指定给子作用域。

 

function bound () {
  return function () {
    console.log(this);
  }.bind(this);
}bound()();
// <- Window
Javascript 相关文章推荐
jQuery 注意事项 与原因分析
Apr 24 Javascript
纯JavaScript实现的完美渐变弹出层效果代码
Apr 02 Javascript
javascript 循环调用示例介绍
Nov 20 Javascript
原生js实现日期联动
Jan 12 Javascript
asp知识整理笔记3(问答模式)
Sep 27 Javascript
详解webpack2+React 实例demo
Sep 11 Javascript
你应该知道的几类npm依赖包管理详解
Oct 06 Javascript
JavaScript页面倒计时功能完整示例
May 15 Javascript
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
Node.js path模块,获取文件后缀名操作
Nov 07 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
Jan 11 Javascript
Moment的feature导致线上bug解决分析
Sep 23 Javascript
JS 日期比较大小的简单实例
Jan 13 #Javascript
JS之Date对象和获取系统当前时间详解
Jan 13 #Javascript
JS OffsetParent属性深入解析
Jan 13 #Javascript
JavaScript网页定位详解
Jan 13 #Javascript
js菜单点击显示或隐藏效果的简单实例
Jan 13 #Javascript
ie8本地图片上传预览示例代码
Jan 12 #Javascript
js 立即调用的函数表达式如何写
Jan 12 #Javascript
You might like
php下连接ftp实现文件的上传、下载、删除文件实例代码
2010/06/03 PHP
php判断GIF图片是否为动画的方法
2020/09/04 PHP
以文件形式缓存php变量的方法
2015/06/26 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
php实现生成PDF文件的方法示例【基于FPDF类库】
2018/07/21 PHP
PHP调用微博接口实现微博登录的方法示例
2018/09/22 PHP
Referer原理与图片防盗链实现方法详解
2019/07/03 PHP
禁止IE用右键的JS代码
2013/12/30 Javascript
基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践
2014/09/26 NodeJs
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
全面了解js中的script标签
2016/07/04 Javascript
利用Angularjs和Bootstrap前端开发案例实战
2016/08/27 Javascript
jQuery可见性过滤选择器用法示例
2016/09/09 Javascript
纯js实现悬浮按钮组件
2016/12/17 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
2017/02/19 Javascript
canvas实现爱心和彩虹雨效果
2017/03/09 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
2017/04/13 Javascript
基于vue开发的在线付费课程应用过程
2018/01/25 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
2018/04/22 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
2018/09/12 Javascript
python 从远程服务器下载东西的代码
2013/02/10 Python
python实现微信跳一跳辅助工具步骤详解
2018/01/04 Python
Python爬虫实现(伪)球迷速成
2018/06/10 Python
美国性感内衣店:Yandy
2018/06/12 全球购物
欧洲最大的预定车位市场:JustPark
2020/01/06 全球购物
金蝶的一道SQL笔试题
2012/12/18 面试题
医学专业应届生的自我评价
2014/02/28 职场文书
《春晓》教学反思
2014/04/20 职场文书
小学班级特色活动方案
2014/08/31 职场文书
2015年全民创业工作总结
2015/07/23 职场文书
MySQL令人咋舌的隐式转换
2021/04/05 MySQL
go 实现简易端口扫描的示例
2021/05/22 Golang
idea搭建可运行Servlet的Web项目
2021/06/26 Java/Android
利用 Python 的 Pandas和 NumPy 库来清理数据
2022/04/13 Python
通过feDisplacementMap和feImage实现水波特效
2022/04/24 HTML / CSS