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 相关文章推荐
Textbox控件注册回车事件及触发按钮提交事件具体实现
Mar 04 Javascript
jquery实现标签上移、下移、置顶
Apr 26 Javascript
js简单设置与使用cookie的方法
Jan 22 Javascript
JavaScript 对象字面量讲解
Jun 06 Javascript
js正则表达式注册页面表单验证
Oct 11 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
Nov 30 Javascript
jquery 仿锚点跳转到页面指定位置的实例
Feb 14 Javascript
VUE v-model表单数据双向绑定完整示例
Jan 21 Javascript
微信小程序实现炫酷的弹出式菜单特效
Jan 28 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
Vue.js路由实现选项卡简单实例
Jul 24 Javascript
详解Vue 换肤方案验证
Aug 28 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中strstr、strrchr、substr、stristr四个函数的区别总结
2014/09/22 PHP
[原创]PHP正则匹配中英文、数字及下划线的方法【用户名验证】
2017/08/01 PHP
PHP设计模式之模板方法模式定义与用法详解
2018/04/02 PHP
php微信公众号开发之欢迎老朋友
2018/10/20 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
phpstorm 配置xdebug的示例代码
2019/03/31 PHP
dwr spring的集成实现代码
2009/03/22 Javascript
jquery cookie插件代码类
2009/05/26 Javascript
js报错 Object doesn't support this property or method的原因分析
2011/03/31 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
2013/05/13 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
微信小程序 form组件详解
2016/10/25 Javascript
Javascript使用function创建类的两种方法(推荐)
2016/11/19 Javascript
原生js实现水平方向无缝滚动
2017/01/10 Javascript
利用Javascript实现一套自定义事件机制
2017/12/14 Javascript
[原创]jquery判断元素内容是否为空的方法
2018/05/04 jQuery
vue打包的时候自动将px转成rem的操作方法
2018/06/20 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
2018/12/22 jQuery
生成无限制的微信小程序码的示例代码
2019/09/20 Javascript
js+canvas实现刮刮奖功能
2020/09/13 Javascript
vue3.0搭配.net core实现文件上传组件
2020/10/29 Javascript
Python使用email模块对邮件进行编码和解码的实例教程
2016/07/01 Python
Django的HttpRequest和HttpResponse对象详解
2018/01/26 Python
用Python实现大文本文件切割的方法
2019/01/12 Python
解决python中导入win32com.client出错的问题
2019/07/26 Python
Flask框架请求钩子与request请求对象用法实例分析
2019/11/07 Python
Python类中self参数用法详解
2020/02/13 Python
如何使用Python调整图像大小
2020/09/26 Python
adidas瑞典官方网站:购买阿迪达斯鞋子和运动服
2019/12/11 全球购物
请编程遍历页面上所有 TextBox 控件并给它赋值为 string.Empty
2015/12/03 面试题
了解AppleTalk协议吗
2014/04/01 面试题
服务宗旨标语
2014/07/01 职场文书
慰问信格式
2015/02/14 职场文书
六年级上册《闻官军收河南河北》的教学设计
2019/11/15 职场文书
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS