美文网首页js笔记Web前端之路程序员
js笔记三十八之call方法深入

js笔记三十八之call方法深入

作者: uplyw | 来源:发表于2018-06-04 21:51 被阅读78次
// Array.prototype.slice -> function(){}
var ary = [12,23,34];
ary.slice()
// ary.slice -> ary这个实例通过原型链的查找机制找到Array.prototype上的slice方法
// ary.slice() -> 让找到的slice方法执行,在执行slice方法的过程中,才把ary数组进行了截取  

call改变this关键字

// Function.prototype.call = function(){};

var obj = {name:"lilei"};
function fn(){
    console.log(this);
}
fn(); // -> window
obj.fn(); // -> Uncaught TypeError: obj.fn is not a function
fn.call(obj) // -> {name: "lilei"}

call方法的作用:
首先我们让原型上的call方法执行,在执行call方法的时候,我们放fn方法中的this变为第一个参数值obj,然后再把fn这个函数执行;

// 重写call方法
Function.prototype.myCall = function (context){
    // -> myCall方法中的this就是当前要操作和改变其this关键字的那个函数名
    
    // -> 1. 让fn中的this关键字变为context的值 -> obj
    // -> 让this这个函数中的"this关键字"变为context
    
    // this.toString().replace("this","obj")
    
    // -> 2. 让fn方法在执行
    // this()
};
fn.myCall(obj); // -> myCall方法中的this是fn
sum.myCall(obj) // -> myCall方法中的this是sum
function sum(){
    
};
function fn1(){console.log(1);}
function fn2(){console.log(2);}
fn1.call(fn2)  // -> 1
// -> 首先fn1通过原型链机制找到 Function.prototype上的call方法,并且让call方法执行
// -> 此时call这个方法中的this就是我们要操作的fn1
// -> 在call方法代码执行的过程中首先让 fn1 中的"this关键字"变成 fn2 ,然后在让 fn1 这个方法执行

fn1.call.call(fn2) // -> 2
// -> fn1.call 首先fn1通过原型链找到Function.prototype上的call方法
// -> 然后在让call方法通过原型在找到Function原型上的call
// -> (因为call本身的值也是一个函数,所以同样可以找到Function.prototype)
// -> 在第二次再找到call的时候让方法执行,方法中的this是 fn1.call
// -> 首先让这个方法中的this变为fn2,然后再让fn1.call执行

fn1.call.call.call.call.call(fn2)  // -> 2

Function.prototype.call(fn1);  // 什么都不输出

Function.prototype.call.call.call(fn1);  // -> 1

相关文章

  • js笔记三十八之call方法深入

    call改变this关键字 call方法的作用:首先我们让原型上的call方法执行,在执行call方法的时候,我们...

  • js中方法继承

    call 和 apply JS中的call()和apply()方法

  • call 方法深入

    1.call方法作用: 让原型上的 call 方法执行,在执行 call 方法时,让调用 call 的方法中的 t...

  • call方法深入

    首先看数组中的一个方法:Array.prototype.slice = function() {} call方法的...

  • 深入js中的call,apply方法

    call(),apply()方法的作用都是用来改变函数运行时的上下文(Context),那么什么是上下文呢? 关于...

  • Web前端------JS高级apply、call、bind方法

    JS apply、call、bind方法使用介绍 在介绍apply 、call、bind方法之前很有必要做一下简单...

  • 2018-12-21 Call 和 Apply

    JS中每个Function对象都有一个apply()方法和一个call()方法 apply 、call 则是立即调...

  • call和apply的模拟实现

    原文出处 JavaScript深入之call和apply的模拟实现 call 我们在模拟 call之前,先看看 c...

  • js call方法

    **call 方法 **请参阅应用于:Function 对象要求版本 5.5调用一个对象的一个方法,以另一个对象替...

  • 函数的继承

    如果js想要实现继承的话,就要调用父类call方法,把this传进去 call和apply

网友评论

  • 0c45406e8da8:文章内容挺不错的。我们侠课岛工作是远程录制课程视频或图文教程,我们会给到课程的需求大纲,每一节课程需要你来详细展开写一些代码举例和讲解清楚,对经验积累和创新能力有一定的要求,有兴趣可以联系我。加我微信:zhimadt

本文标题:js笔记三十八之call方法深入

本文链接:https://www.haomeiwen.com/subject/amhusftx.html