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

 更新时间:2018年04月21日 13:58:50   作者:songgsCld  
这篇文章主要介绍了JavaScript调用模式与this关键字绑定的关系 的相关资料,需要的朋友可以参考下

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关键字绑定的关系 ,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

相关文章

  • JS数据类型分类及常用判断方法

    JS数据类型分类及常用判断方法

    这篇文章主要介绍了JS数据类型分类及常用判断方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-11-11
  • JavaScript实现通讯录功能

    JavaScript实现通讯录功能

    这篇文章主要为大家详细介绍了JavaScript实现通讯录功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • JS批量操作CSS属性详细解析

    JS批量操作CSS属性详细解析

    这篇文章主要介绍了JS批量操作CSS属性。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • 使用Bootstrap美化按钮实例代码(demo)

    使用Bootstrap美化按钮实例代码(demo)

    这篇文章主要介绍了使用Bootstrap美化按钮实例代码(demo),非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-02-02
  • JS添加或修改控件的样式(Class)实现方法

    JS添加或修改控件的样式(Class)实现方法

    下面小编就为大家带来一篇JS添加或修改控件的样式(Class)实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • Javascript中async与await的捕捉错误详解

    Javascript中async与await的捕捉错误详解

    这篇文章主要为大家详细介绍了Javascript中async与await的捕捉错误,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-03-03
  • Javascript Function.prototype.bind详细分析

    Javascript Function.prototype.bind详细分析

    这篇文章主要介绍了Javascript Function.prototype.bind详细分析的相关资料,需要的朋友可以参考下
    2016-12-12
  • javascript 兼容各个浏览器的事件

    javascript 兼容各个浏览器的事件

    这篇文章主要介绍了javascript 兼容各个浏览器的事件,需要的朋友可以参考下
    2015-02-02
  • 微信小程序slider组件使用详解

    微信小程序slider组件使用详解

    这篇文章主要为大家详细介绍了微信小程序slider组件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-01-01
  • Javascript中With语句用法实例

    Javascript中With语句用法实例

    这篇文章主要介绍了Javascript中With语句用法,实例分析了javascript中with语句的相关使用方法,类似VB语句的用法,需要的朋友可以参考下
    2015-05-05

最新评论