本篇文章给大家介绍一下 JavaScript 中的 4 种调用模式. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
在 JS 中, 一共 4 中调用方式. 需要注意的是, 调用方式中, this 的指向问题.
函数调用模式
this 丢失, debug 会提示未定义相应属性. 按照规范, 需要将 this 赋值给 that
- let myObj = {
- value : 1,
- double : function(){
- let that = this
- let _ = function (){
- that.value = that.value *2
- // this.value = this.value *2 // 内部函数的 this 被绑定错误值
- }
- _() // 函数调用模式
- }
- }
- myObj.double() // 方法调用模式
- console.log(myObj.value) // 输出 2
方法调用模式
在函数调用模式中的 myObj.double() 就是方法调用模式, 这时, 这个函数被保存为对象的一个属性.
构造器调用模式
通过 new 来声明, this 会被绑定到一个连接 prototype 的新对象. 结合原型链, 可以实现很多有趣用法.
- function Myobj(value){ // 注意命名规范
- this.value = value
- }
- Myobj.prototype.getValue = function(){
- return this.value
- }
- let myobj = new Myobj(1) // 构造器调用
- console.log(myobj.getValue())
apply 调用模式
apply: 为了动态改变 this 而出现. 结合闭包, 可以更方便的实现原型继承
基于上面的例子, 我们首先将 getValue 方法放入单独的文件./util.JS 下.
./util.JS
- exports = module.exports = function getValue(arg){
- return `${this.value} \n 我是参数:${arg} `
- }
然后再在需要的文件中引入:
- 'use strict'
- function Myobj(value){
- this.value = value
- }
- Myobj.prototype.getValue = function(arg){
- return require('./util').apply(this,[arg]) // apply 调用模式
- }
- let myobj = new Myobj(1)
- console.log(myobj.getValue(-1))
如此, 优美地实现了组件化, 代码逻辑和架构变得更加清晰.
关于 apply 和 call
相同点:
作用一样: 动态改变 this
不同点:
apply 调用方式:
func.apply(obj,[arg1,arg2,...])
, 接受数组参数
call 调用方式:
func.call(obj,arg1,arg2,...)
, 接受连续参数
本文转载自: https://www.cnblogs.com/geyouneihan/p/9127316.html
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/web/javascript/16184.html