Javascript手写call, apply, bind

call方法实现

 1         Function.prototype.mycall = function(context) {
 2             var context = context || window
 3             context.fn = this
 4             var args = [...arguments].slice(1)
 5             var result = context.fn(...args)
 6             delete context.fn
 7             return result
 8         }
 9         var a = {name: ‘ss‘}
10         function getName(){console.log(this.name)}
11         getName.mycall(a) // ‘ss‘

apply方法实现

        Function.prototype.myapply = function(context) {
            var context = context || window
            context.fn = this
            var result
            if (arguments[1]) {
                result = context.fn(...arguments[1])
            } else {
                result = context.fn()
            }
            delete context.fn
            return result
        }
        var a = {name: ‘ss‘}
        function getName(){console.log(this.name)}
        getName.apply(a) // ‘ss‘    

bind实现

Function.prototype.myBind = function (context) {
  if (typeof this !== ‘function‘) {
    throw new TypeError(‘Error‘)
  }
  var _this = this
  var args = [...arguments].slice(1)
  // 返回一个函数
  return function F() {
    // 因为返回了一个函数,我们可以 new F(),所以需要判断
    if (this instanceof F) {
      return new _this(...args, ...arguments)
    }
    return _this.apply(context, args.concat(...arguments))
  }
}

原文地址:https://www.cnblogs.com/codejoker/p/10462278.html

时间: 2024-08-28 16:41:30

Javascript手写call, apply, bind的相关文章

22 道高频 JavaScript 手写面试题及答案

实现防抖函数(debounce) 防抖函数原理:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时. 那么与节流函数的区别直接看这个动画实现即可. 手写简化版: // 防抖函数 const debounce = (fn, delay) => { let timer = null; return (...args) => { clearTimeout(timer); timer = setTimeout(() => { fn.apply(this, args); }, del

别真以为JavaScript中func.call/apply/bind是万能的!

自从学会call/apply/bind这三个方法后我就各种场合各种使用各种得心应手至今还没踩过什么坑,怎么用?说直白点就是我自己的对象没有某个方法但别人有,我就可以通过call/apply/bind去调用执行别人家的方法,不太懂具体用法的同学可移至MDN学习一下Function.prototype.call() Function.prototype.apply() Function.prototype.bind() ,本文不讲解使用,但是这三个方法并不是万能的,并不一定会执行你想要的那个函数,因

JavaScript学习--Item9 call(),apply(),bind()与回调

1.call(),apply(),bind()方法 JavaScript 中通过call或者apply用来代替另一个对象调用一个方法,将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象.简单的说就是改变函数执行的上下文,这是最基本的用法.两个方法基本区别在于传参不同. call(obj,arg1,arg2,arg3); call第一个参数传对象,可以是null.参数以逗号分开进行传值,参数可以是任何类型. apply(obj,[arg1,arg2,arg3]); appl

仅用原生JavaScript手写DOM事件模型

前言 前段时间博客园里有篇很火的帖子2016十家公司前端面试小记,主要讲作者的前端求职面试经历,其中提到了面试官会考察手写一个简单的事件模型: "如果上述都ok的话,那么极有可能要求让你[实现事件模型],即写一个类或是一个模块,有两个函数,一个bind一个trigger,分别实现绑定事件和触发事件,核心需求就是可以对某一个事件名称绑定多个事件响应函数,然后触发这个事件名称时,依次按绑定顺序触发相应的响应函数." 如果了解观察者模式,那么事件模型应该不算太难.本着深入钻研的精神,我试着来

深入浅出:了解JavaScript中的call,apply,bind的差别

在 javascript之 this 关键字详解文章中,谈及了如下内容,做一个简单的回顾: 1.this对象的涵义就是指向当前对象中的属性和方法. 2.this指向的可变性.当在全局作用域时,this指向全局:当在某个对象中使用this时,this指向该对象:当把某个对象的方法赋值给      另外一个对象时,this会指向后一个对象. 3.this的使用场合有:在全局环境中使用:在构造函数中使用,在对象的方法中使用. 4.this的使用注意点,最重要的一点就是要避免多层嵌套使用this对象.

javascript中的call(),apply(),bind()方法的区别

之前一直迷惑,记不住call(),apply(),bind()的区别.不知道如何使用,一直处于懵懂的状态.直到有一天面试被问到了这三个方法的区别,所以觉得很有必要总结一下. 如果有不全面的地方,后续再进行补充. 1. 改变this的指向 var obj = { name : '张三', age : 17, myFun : function () { console.log(this.name + ' ' + this.age); } } var obj2 = { name : '李四', age

JavaScript中的call,apply,bind的使用

一.call call(thisObj,arg1,arg2,arg...)定义:调用一个对象的方法,以另一个对象替换当前对象.说明:call方法可以用来代替另一个对象调用一个方法.call方法可以将一个函数对象的上下文改变为由thisObj指定的新对象.thisObj的取值有以下几种情况:(1)不传,或者为null,undefined时,函数中的this指向window对象:(2)传递另一个函数的函数名,函数中的this指向这个函数的引用:(3)传递基础类型数据时,函数中的this指向其对应的包

javascript 手写OOP简易年历

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .container { width: 220px; border: 20px lightgreen solid; margin: 20px auto; } u

JavaScript基础之--- 手写 apply方法 的实现

手写实现如下: Function.prototype.myApply = fucntion(context) { if(typeof this !== 'function') { throw new TypeError('not a function!') } context = context || window context.fn = this let result if(arguments[1]) { result = context.fn(...arguments[1]) }else{