call、apply、bind 原理、区别及原生js模拟。

vpants 发布于2019-08-22 15:36 / 3173人阅读

摘要：的原型上存放着实例的一些共有方法。每个函数都可以调用方法，来改变当前这个函数执行的关键字，并且支持传入参数我们用原生模拟方法，来更加深刻了解它。和方法类似，作用都是改变当前函数执行的指向，并且将函数执行。

Function的prototype原型上存放着 Function实例的一些共有方法。
A.Function的原型不像其他类(Array、Object...)的原型一样是个对象，Fuction的原型是一个空函数，是可以执行的，只不过返回undefined，Function.prototype();但是这并不影响它作为一个对象拥有自己的属性方法
B.Function这个类，同时也是Function的一个实例，所以它也具备__proto__属性，这个属性指向它自己的原型

1.call方法。每个函数都可以调用call方法，来改变当前这个函数执行的this关键字，并且支持传入参数;我们用原生js模拟call方法，来更加深刻了解它。
a.第一个参数为调用call方法的函数中的this指向
b.第二个及以后的参数为给调用call方法的函数传入的参数
c.执行这个函数，call方法返回的结果就是调用他的函数返回的结果
d.将this指向销毁。

Function.prototype.mycall = function(context){
    context = context || window;
    context.fn = this;
    var arr = [];
    for(var i = 1;i
2.apply和call方法类似，作用都是改变当前函数执行的this指向，并且将函数执行。
唯一不同就是 call方法给当前函数传参是一个一个传。而apply是以数组方式传入参数
Function.prototype.myApply =function(context,arr){
context = Object(context) || window;
context.fn = this;
var result;
if(!arr){
    result= context.fn();
}else{
    var args = [];
    for(var i=0;i
3.bind方法，是改变当前调用bind方法的函数this指向，但是不会立即执行当前函数，而是返回一个新的函数。并且支持给新的函数传入参数执行，从而出发之前调用bind方法的函数执行，并且参数透传进去。bind方法是高阶函数的一种。
Function.prototype.myBind = function(){
var context = arguments[0];
var self = this;
return function (){
    self.myApply(context,arguments)
}
};
var j = {name:1};
var k = [123]
function drink (k){
    console.log(this.name,k);
}
var fn = drink.myBind(j);
fn(k);


实现原生 call、apply、bind方法的重点:
1.改变this指向:函数执行，点.前面是谁，this就是谁的原理改变this指向
2.参数透传:通过eval将字符串转变成js语法 去执行。
3.bind方法返回一个函数，返回的函数执行，会进行作用域查找context对象；并且通过原型链查找调用apply方法
call、apply、bind相同和区别
相同：都能改变函数执行的this指向
不同:callapply 是立即执行 bind是不执行
call传参是一个一个传入，apply是数组形式传入

云服务器 GPU云服务器 JS中bind、call和apply的作 apply与call的区别 js中的call和apply 原生js选项卡原理

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93582.html

可能遇到假的面试题：不用call和apply方法模拟实现ES5的bind方法

摘要：来自朋友去某信用卡管家的做的一道面试题，用原生模拟的方法，不准用和方法。他们的用途相同，都是在特定的作用域中调用函数。不同之处在于，方法传递给调用函数的参数是逐个列出的，而则是要写在数组中。本文首发我的个人博客：前端小密圈，评论交流送1024邀请码，嘿嘿嘿?。来自朋友去某信用卡管家的做的一道面试题，用原生JavaScript模拟ES5的bind方法，不准用call和bind方法。 ...

李世赞 2019-08-29 12:31 评论0 收藏0
可能遇到假的面试题：不用call和apply方法模拟实现ES5的bind方法

摘要：来自朋友去某信用卡管家的做的一道面试题，用原生模拟的方法，不准用和方法。他们的用途相同，都是在特定的作用域中调用函数。不同之处在于，方法传递给调用函数的参数是逐个列出的，而则是要写在数组中。本文首发我的个人博客：前端小密圈，评论交流送1024邀请码，嘿嘿嘿?。来自朋友去某信用卡管家的做的一道面试题，用原生JavaScript模拟ES5的bind方法，不准用call和bind方法。 ...

ConardLi 2019-08-22 11:03 评论0 收藏0
【进阶3-3期】深度解析 call 和 apply 原理、使用场景及实现

摘要：之前文章详细介绍了的使用，不了解的查看进阶期。不同的引擎有不同的限制，核心限制在，有些引擎会抛出异常，有些不抛出异常但丢失多余参数。存储的对象能动态增多和减少，并且可以存储任何值。这边采用方法来实现，拼成一个函数。之前文章详细介绍了 this 的使用，不了解的查看【进阶3-1期】。 call() 和 apply() call() 方法调用一个函数, 其具有一个指定的 this 值和分...

godlong_X 2019-08-23 14:31 评论0 收藏0
面试官:你能手写实现call,apply,bind方法吗?

摘要：前言实践系列主要是让我们通过实践去加深对一些原理的理解。求求三兄弟的作用都是为了改变函数运行时上下文指向而存在的。不会立即调用其他两个会立即调用。如果有帮助到你请给我一个就算是对我的感谢啦前言 [实践系列] 主要是让我们通过实践去加深对一些原理的理解。实践系列-前端路由实践系列-Babel原理实践系列-Promises/A+规范实践系列-浏览器缓存机制有兴...

Warren 2019-08-23 15:37 评论0 收藏0