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 相关文章推荐
【消息提示组件】,兼容IE6/7&&FF2
Sep 04 Javascript
JavaScript的单例模式 (singleton in Javascript)
Jun 11 Javascript
ExtJs grid行 右键菜单的两种方法
Jun 19 Javascript
jquery getScript动态加载JS方法改进详解
Nov 15 Javascript
基于jQuery实现模拟页面加载进度条
Apr 01 Javascript
jQuery前端分页示例分享
Feb 10 Javascript
jQuery ztree实现动态树形多选菜单
Aug 12 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
Jan 19 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
Mar 08 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
Feb 11 Javascript
js实现网页同时进行多个倒计时功能
Feb 25 Javascript
一小时迅速入门Mybatis之bind与多数据源支持 Java API
Sep 15 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
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
编写高性能的JavaScript 脚本的加载与执行
2010/04/19 Javascript
基于jquery的复制网页内容到WORD的实现代码
2011/02/16 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
2011/10/12 Javascript
Jquery网页出现的乱码问题的三种解决方法
2013/06/30 Javascript
jquery的trigger和triggerHandler的区别示例介绍
2014/04/20 Javascript
jQuery获得子元素个数的方法
2015/04/14 Javascript
基于jquery实现动态竖向柱状条特效
2016/02/12 Javascript
微信小程序  自定义创建详细介绍
2016/10/27 Javascript
JavaScript模板引擎Template.js使用详解
2016/12/15 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
2017/03/07 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
2017/04/11 Javascript
AngularJS改变元素显示状态
2017/04/20 Javascript
Vue中之nextTick函数源码分析详解
2017/10/17 Javascript
setTimeout时间设置为0详细解析
2018/03/13 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
2018/05/01 Javascript
js中Generator函数的深入讲解
2019/04/07 Javascript
Python爬虫实例_利用百度地图API批量获取城市所有的POI点
2018/01/10 Python
在windows下Python打印彩色字体的方法
2018/05/15 Python
python3实现163邮箱SMTP发送邮件
2018/05/22 Python
关于python中密码加盐的学习体会小结
2019/07/15 Python
使用 Python 处理3万多条数据只要几秒钟
2020/01/19 Python
Django高并发负载均衡实现原理详解
2020/04/04 Python
Python数据可视化实现多种图例代码详解
2020/07/14 Python
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
HTML5在手机端实现视频全屏展示方法
2020/11/23 HTML / CSS
什么是托管函数?托管函数有什么用?
2014/06/15 面试题
Java中各种基本数据类型的默认值都是什么
2016/12/22 面试题
机关门卫岗位职责
2013/12/30 职场文书
党支部对照检查材料
2014/08/25 职场文书
2014年学习部工作总结
2014/11/12 职场文书
先进工作者申报材料
2014/12/23 职场文书
《夜莺的歌声》教学反思
2016/02/22 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书
预备党员入党思想汇报(范文)
2019/08/14 职场文书
Apache压力测试工具的安装使用
2021/03/31 Servers