JavaScript四种调用模式和this示例介绍

所属分类: 网络编程 / JavaScript 阅读数: 961
收藏 0 赞 0 分享
JavaScript调用时除了声明时定义的形参外,每个函数接受两个附加参数:this 和arguments,this在面向对象编程中非常重要,它取决于调用模式。

JavaScript有四种调用模式,方法调用模式,函数调用模式,构造器调用模式和apply调用模式。这些模式在初始化关键参数this上存在差异。

方法调用模式:当一个函数被保存为对象的一个属性时,我们称它为一个方法,当一个方法被调用时,this被绑定到该对象上。如果调用表达式包含一个属性取表达式(即一个.点表达式或[script]下标表达式),那么它被当做一个方法调用。
复制代码 代码如下:

var myObject = {
value: 0;
increment: function(inc){
this.value += typeof inc === 'number' ? inc : 1;
}
};

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

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

方法可以使用this去访问对象,所以它能从对象中取值或修改对象。this的绑定发生在调用的时候。这个超级迟绑定使得函数可以对this高度复用。通过this可以取得他们所属的上下文方法称为公共方法。

函数调用模式:当一个函数并非一个对象的属性时,那么它被当做一个函数来调用 var sum = add(3, 4);//sum值为7
当函数以此模式调用时,this被绑定到全局对象。

构造器调用模式:JavaScript是一门基于原型继承的语言。这意味着可以直接从其他对象继承属性。该语言是无类别的。
如果在函数前面带上new来调用,那么将创建一个隐藏连接到该函数的prototype成员的新对象,同时this将会被绑定到那个新对象上。

Apply调用模式:因为JavaScript是一门函数式的面向对象编程语言,所以函数可以拥有方法。
apply方法让哦我们构建一个参数数组并用其去调用函数。它也允许我们选择this的值。
apply方法接受两个参数,第一个将被绑定给this的值,第二个就是一个参数数组。
更多精彩内容其他人还在看

JavaScript this关键字指向常用情况解析

这篇文章主要介绍了JavaScript this关键字指向常用情况解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

Vue-cli打包后如何本地查看的操作

这篇文章主要介绍了Vue-cli打包后如何本地查看的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue cli 3.0通用打包配置代码,不分一二级目录

这篇文章主要介绍了vue cli 3.0通用打包配置代码,不分一二级目录,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JavaScript事件循环及宏任务微任务原理解析

这篇文章主要介绍了JavaScript事件循环及宏任务微任务原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

关于vue-cli3打包代码后白屏的解决方案

这篇文章主要介绍了关于vue-cli3打包代码后白屏的解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue打包静态资源后显示空白及static文件路径报错的解决

这篇文章主要介绍了vue打包静态资源后显示空白及static文件路径报错的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue-cli3访问public文件夹静态资源报错的解决方式

这篇文章主要介绍了vue-cli3访问public文件夹静态资源报错的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS继承实现方法及优缺点详解

这篇文章主要介绍了JS继承实现方法及优缺点详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

vue或react项目生产环境去掉console.log的操作

这篇文章主要介绍了vue或react项目生产环境去掉console.log的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题

这篇文章主要介绍了解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多