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 相关文章推荐
一个报数游戏js版(约瑟夫环问题)
Aug 05 Javascript
javascript中验证大写字母、数字和中文
Jan 15 Javascript
JS基于面向对象实现的放烟花效果
May 07 Javascript
CSS图片响应式 垂直水平居中
Aug 14 Javascript
Javascript日期格式化format函数的使用方法
Aug 30 Javascript
layer实现弹窗提交信息
Dec 12 Javascript
BootStrap select2 动态改变值的方法
Feb 10 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
Nov 27 Javascript
JS装饰器函数用法总结
Apr 21 Javascript
详解vue-cli3多环境打包配置
Mar 28 Javascript
原生javascript制作的拼图游戏实现方法详解
Feb 23 Javascript
vue实现简单全选和反选功能
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知识收集
2012/08/20 PHP
PHP实现的二分查找算法实例分析
2017/12/19 PHP
JSON序列化与解析原生JS方法且IE6和chrome测试通过
2013/09/05 Javascript
JS实现拖动示例代码
2013/11/01 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
JS继承之借用构造函数继承和组合继承
2016/09/07 Javascript
详解如何用VUE写一个多用模态框组件模版
2018/09/27 Javascript
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
JavaScript enum枚举类型定义及使用方法
2020/05/15 Javascript
python排序方法实例分析
2015/04/30 Python
在Python中操作时间之mktime()方法的使用教程
2015/05/22 Python
Linux上安装Python的PIL和Pillow库处理图片的实例教程
2016/06/23 Python
Python字符串格式化的方法(两种)
2017/09/19 Python
Python实现压缩和解压缩ZIP文件的方法分析
2017/09/28 Python
Python 读取图片文件为矩阵和保存矩阵为图片的方法
2018/04/27 Python
根据DataFrame某一列的值来选择具体的某一行方法
2018/07/03 Python
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
Python3 jupyter notebook 服务器搭建过程
2018/11/30 Python
python内存管理机制原理详解
2019/08/12 Python
解决Jupyter Notebook开始菜单栏Anaconda下消失的问题
2020/04/13 Python
Python matplotlib实时画图案例
2020/04/23 Python
python3.4中清屏的处理方法
2020/07/06 Python
Python使用eval函数执行动态标表达式过程详解
2020/10/17 Python
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
CSS3中Animation动画属性用法详解
2016/07/04 HTML / CSS
Auguste The Label官网:澳大利亚一家精品女装时尚品牌
2020/06/14 全球购物
《登鹳雀楼》教学反思
2014/04/09 职场文书
触电现场处置方案
2014/05/14 职场文书
团干部培训方案
2014/06/03 职场文书
部门群众路线教育实践活动对照检查材料思想汇报
2014/10/07 职场文书
个人批评与自我批评
2014/10/15 职场文书
2015年环卫工作总结
2015/04/28 职场文书
公司职员入党自传书
2015/06/26 职场文书
退伍军人感言
2015/08/01 职场文书
《搭石》教学反思
2016/02/18 职场文书
分享一些Java的常用工具
2021/06/11 Java/Android