js中call函数理解

一直以来，对call函数都不是很理解，经常看到用，有时候把，觉得挺好理解的，有时候吧，又觉得摸不清头脑，最近在看d3,里面又遇到call,所以，还是得把这个问题理解透彻。现在把我的理解记录如下：
call函数的作用，最常用的概况，就是改变this的指向，确实是，可是怎么理解呢？先来看下一个简单是实现原理

Function.prototype.$call = function(context,...args){const fn = this;//先将this即这个调用call的函数赋值给一个常量fn
context.fn = fn;//给传入的对象新增属性，并将其指向前面的调用call的函数
context.fn(...args);//传入的对象调用执行(调用call的函数)，后面为传入的参数
delete context.fn//删除传入context对象下的fn属性
}
function test(){console.log('总和是':this.a+this.b)
}
const obj = {a:1,b:2};
test.$call(window)//window调用，打印'总和是NaN'
test.$call(obj)//obj调用，打印'总和是3'

通过$call方法模拟call,是如何将函数中的this属性改变的，就是给传入的对象增加属性，调用（调用call的方法）来改变this,具体实现

//1.先写立即执行函数
;(function(){function calls(context){//如果后面要带参数进去，这个context要必传，如果无关紧要，可用为null//3.判断是否传参，如果有，包装为对象，否则，就是windowcontext = context?Object(context):window;//4.将this指向为context.fn的属性context.fn = this;//5.可能后面会有多个参数，这个就是call和apply的区别，call是一个一个传，而apply则传入的是一个数组const args = [];for(let i = 1;i<arguments.length;i++){//i从1开始，因为第一个为对象args.push(arguments[i])}//6.调用context.fn函数const res = context.fn(...args);//7.删除对象上的fn属性delete context.fn//8.最后返回return res;}//2.将calls挂载到函数的原型对象上面Function.prototype.calls = calls;
})()
//将上面函数调用过来，结果一样
function test(){console.log('总和是':this.a+this.b)
}
const obj = {a:1,b:2};
test.$call(window)//window调用，打印'总和是NaN'
test.$call(obj)//obj调用，打印'总和是3'

由于箭头函数的this,是在哪里申明就是那里，因此，call,apply的方法对箭头函数涉及到this则无用，如果只是传参借用还是可用，call和apply的区别则只是传参的区别，在calls中注释中有提及。

js中call函数理解相关推荐

java js中 function函数报错_浅析JS中对函数function的理解(基础篇)
正文:我们知道,在js中,函数实际上是一个对象,每个函数都是Function类型的实例,并且都与其他引用类型一样具有属性和方法.因此,函数名实际上是指向函数对象的指针,不与某个函数绑定.在常见的两种定 ...
Js中匿名函数的理解
目录 1.js中匿名函数的N种写法最常见的用法: 2.JavaScript 匿名函数及闭包 2.1 匿名函数 2.1.1 函数的定义 2.1.2 匿名函数的创建 2.2 闭包 2.3 举例 2.4 ...
JS OOP -02 深入认识JS中的函数
深入认识JS中的函数: 1.概述,认识函数对象 2.函数对象和其他内部对象的关系 3.将函数作为参数传递 4.传递给函数的隐含参数:arguments 5.函数的apply,call方法和length ...
谈谈JS中的函数劫持
说到劫持,第一反应可能是什么不好的东西.函数劫持并不邪恶,关键是看使用的人.虽然这个概念在前端领域使用较少,但是在安全领域.自定义业务等场景下还是有一定的使用价值的.所以,这一篇文章将会和大家一起去了 ...
JS中setter/getter理解
JS中setter/getter理解 JS对象属性 get/set和getter/setter 数据属性 Object.defineProperty() 访问器属性 getter/setter创建及删 ...
JS中Promise函数then的奥秘探究
JS中Promise函数then的奥秘探究 Promise概述 Promise对象是CommonJS工作组提出的一种规范,目的是为异步操作提供统一接口. 那么,什么是Promises? 首先,它是一个 ...
JS中的函数,Array对象,for-in语句,with语句,自定义对象,Prototype
一)函数 A)JS中的函数的定义格式: function add(a,b) { var sum = a+b; document.write("两个数的和是:" + sum); // ...
JS中的函数声明和函数表达式
JS中的函数声明和函数表达式 1. 函数声明定义一个具有指定参数的函数函数声明提升, 函数声明在JS解析时进行函数提升,因此在同一个作用域内,不管函数声明在哪里定义,该函数都可以进行调用 hoist ...
js中trim函数_30天中的30个Excel函数：03 – TRIM
js中trim函数 Yesterday, in the 30XL30D challenge, we took a poke at the lazy brother-in-law function -- ...

js中call函数理解

js中call函数理解相关推荐

最新文章

热门文章