JavaScript调用模式与this关键字绑定的关系


Posted in Javascript onApril 21, 2018

Invocation 调用

调用一个函数将暂停当前函数的执行,传递控制权和参数给新函数。

实参与形参不一致不会导致运行时错误,多的被忽略,少的补为undefined

每个方法都会收到两个附加参数:this和arguments。this的值取决于调用的模式,调用模式:方法,函数,构造器和apply调用模式
this被赋值发生在被调用的时刻。不同的调用模式可以用call方法实现

var myObject = { 
value: 0, 
increment: function (inc) { 
this.value += typeof inc === 'number' ? inc : 1; 
} 
}; 
myObject.double = function(){ 
var helper = function(){ 
console.log(this);// this point to window 
} 
console.log(this);// this point to object myObject 
helper(); 
} 
myObject.double();//myObject Window

1 The Method Invocation Pattern 方法调用模式

方法:函数被保存为对象的属性.当方法被调用时,this被绑定到该对象

公共方法:通过this取得他们所属对象的上下文的方法

myObject.increment(); 
document.writeln(myObject.value); //

底层实现: myObject.increment。call(myObject,0);

2 The Function Invocation Pattern 函数调用模式

当函数并非对象的属性时就被当作函数调用(有点废话。。),this被绑定到全局对象(window)

ECMAScript5中新增strict mode, 在这种模式中,为了尽早的暴露出问题,方便调试。this被绑定为undefined

var add = function (a,b) { return a + b;}; 
var sum = add(3,4);// sum的值为7

底层实现:add.call(window,3,4)

strict mode:add.call(undefined,3,4)

方法调用模式和函数调用模式的区别

function hello(thing) { 
console.log(this + " says hello " + thing); 
} 
person = { name: "Brendan Eich" } 
person.hello = hello; 
person.hello("world") // [object Object] says hello world 等价于 person。hello。call(person,“world”) 
hello("world") // "[object DOMWindow]world" 等价于 hello。call(window,“world”)

3 The Constructor Invocation Pattern

JavaScript是基于原型继承的语言,同时提供了一套基于类的语言的对象构建语法。

this指向new返回的对象

var Quo = function (string) { 
this.status = string; 
}; 
Quo.prototype.get_status = function ( ) { 
return this.status; 
}; 
var myQuo = new Quo("this is new quo"); //new容易漏写,有更优替换 
myQuo.get_status( );// this is new quo

4 The Apply Invocation Pattern

apply和call是javascript的内置参数,都是立刻将this绑定到函数,前者参数是数组,后者要一个个的传递apply也是由call底层实现的

apply(this,arguments[]); 
call(this,arg1,arg2...); 
var person = { 
name: "James Smith", 
hello: function(thing,thing2) { 
console.log(this.name + " says hello " + thing + thing2); 
} 
} 
person.hello.call({ name: "Jim Smith" },"world","!"); // output: "Jim Smith says hello world!" 
var args = ["world","!"]; 
person.hello.apply({ name: "Jim Smith" },args); // output: "Jim Smith says hello world!"

相对的,bind函数将绑定this到函数和调用函数分离开来,使得函数可以在一个特定的上下文中调用,尤其是事件bind的apply实现

Function.prototype.bind = function(ctx){ 
var fn = this; //fn是绑定的function 
return function(){ 
fn.apply(ctx, arguments); 
}; 
}; 
bind用于事件中 
function MyObject(element) { 
this.elm = element; 
element.addEventListener('click', this.onClick.bind(this), false); 
}; 
//this对象指向的是MyObject的实例 
MyObject.prototype.onClick = function(e) { 
var t=this; //do something with [t]... 
};

总结

以上所述是小编给大家介绍的JavaScript调用模式与this关键字绑定的关系 ,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
Jun 29 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
Aug 09 Javascript
Web前端框架Angular4.0.0 正式版发布
Mar 28 Javascript
VUE前端cookie简单操作
Oct 17 Javascript
使用Angular CLI生成路由的方法
Mar 24 Javascript
详解Vue中使用Echarts的两种方式
Jul 03 Javascript
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
echarts多条折线图动态分层的实现方法
May 24 Javascript
Vue商品控件与购物车联动效果的实例代码
Jul 21 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
vue监听dom大小改变案例
Jul 29 Javascript
原生js实现自定义消息提示框
Nov 19 Javascript
关于jquery layui弹出层的使用方法
Apr 21 #jQuery
jQuery中的for循环var与let的区别
Apr 21 #jQuery
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
Apr 21 #Javascript
JS实现字符串去重及数组去重的方法示例
Apr 21 #Javascript
AngularJs用户输入动态模板XSS攻击示例详解
Apr 21 #Javascript
vue源码解析之事件机制原理
Apr 21 #Javascript
JavaScript获取用户所在城市及地理位置
Apr 21 #Javascript
You might like
全国中波电台频率表
2020/03/11 无线电
PHP的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
php+mysql实现无限级分类
2015/11/11 PHP
PHP获取访问页面HTTP状态码的实现代码
2016/11/03 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
Laravel访问出错提示:`Warning: require(/vendor/autoload.php): failed to open stream: No such file or di解决方法
2019/04/02 PHP
火狐4、谷歌12不支持Jquery Validator的解决方法分享
2011/06/20 Javascript
javascript实现带节日和农历的日历特效
2015/02/01 Javascript
js改变css样式的三种方法推荐
2016/06/28 Javascript
微信小程序 window_x64环境搭建
2016/09/30 Javascript
nodejs+websocket实时聊天系统改进版
2017/05/18 NodeJs
微信小程序tabbar不显示解决办法
2017/06/08 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
深入浅析Node.js单线程模型
2017/07/10 Javascript
vue上传图片组件编写代码
2017/07/26 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
2017/10/16 Javascript
浅析JS抽象工厂模式
2017/12/14 Javascript
详解PHP后期静态绑定分析与应用
2018/03/21 Javascript
Vue开发环境中修改端口号的实现方法
2019/08/15 Javascript
Vue项目开发常见问题和解决方案总结
2020/09/11 Javascript
[01:32]2014DOTA2西雅图邀请赛 CIS我们有信心进入正赛
2014/07/08 DOTA
python实现各进制转换的总结大全
2017/06/18 Python
python实现最长公共子序列
2018/05/22 Python
《与孩子一起学编程》python自测题
2018/05/27 Python
Python算法中的时间复杂度问题
2019/11/19 Python
在Sublime Editor中配置Python环境的详细教程
2020/05/03 Python
在python3.9下如何安装scrapy的方法
2021/02/03 Python
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
将一个数的从第5位开始的7个数取出,其余位置0
2016/05/26 面试题
二年级语文教学反思
2014/02/02 职场文书
服务行业演讲稿
2014/09/02 职场文书
教师群众路线心得体会
2014/11/04 职场文书
详解Python魔法方法之描述符类
2021/05/26 Python
MySql如何将查询的出来的字段进行转换
2022/06/14 MySQL
Win11任务栏无法正常显示 资源管理器不停重启的解决方法
2022/07/07 数码科技