手写bind源码

手写bind源码

改变函数this指向的三个方法:call bind apply
三个方法的相同点:
目标函数被调用时,改变this的指向的值
三个方法都是函数的方法,挂在在Function.prototype上

不同点:
目标函数调用call和apply后,会直接被执行
目标函数调用bind后,不会立即执行,而是返回一个新的函数,调用新函数才会执行目标函数

自定义一个类似于bind函数的函数,将其挂载到函数Function上面,然后就可以用函数来调用该自定义的函数了
给函数扩展一个方法
Function.prototype.customeBind = function (thisArg,...list){
let self = this;
console.log(self)//func
//返回一个新函数
return function(...arg2){
//改变this的指向
self.apply(thisArg,[...list,...arg2])
}

    }
    function func(...arg){
        console.log(this);
        console.log(arg);
    }
    func.prototype.miaov = function (){
        console.log(123)
    }
    let newFunc = func.bind({a:1},1,2,3,4);
    //自定义bind函数
    let newFunc2 = func.customeBind({a:1},1,2,3,4)
    newFunc(5,6,7,8)
    newFunc2(5,6,7,8);

目标函数的实现
1.目标函数调用后返回新函数

2.调用新函数,也就是调用目标函数this为传入bind的第一个参数

3.把新函数当作构造函数,是可以找到目标函数的原型,所以新函数继承目标函数的原型

4.新函数当作构造函数后,目标函数this指向为原型对象

注意

目标函数:调用bind的函数,func.bind func就称之为是目标函数
新函数:bind返回的函数,

1.返回的函数作为构造函数,新函数要继承目标函数的原型
2.一旦把新函数当成构造函数了,目标函数的this应该指向实例对象

    //构造函数的问题
     Function.prototype.customeBind = function (thisArg,...list){
        let self = this;
        console.log(self)//func

       //自己实现的bind函数,如果把返回的新函数当成构造函数,此时会遇到问题,就是找不到目标函数原型上的方法,解决:放新函数继承目标函数的原型
       let Bound =  function(...arg2){
            //改变this的指向
            // self.apply(thisArg,[...list,...arg2])
            //如果这个函数作为了构造函数,那么目标函数的this,应该执行的是实例对象
            //如果这个不是作为构造函数,目标函数中的this还指向thisArg
            let thisArgSelf = this instanceof Bound ? this : thisArg;
            self.apply(thisArgSelf,[...list,...arg2])

        }
        //原型继承
        // Bound.prototype = self.prototype;
        //Object.create用来创建以某一个对象作为原型的对象的
        Bound.prototype = Object.create(self.prototype)//创建一个新的对象,该新对象是以self.prototype作为原型创建出来的
        Bound.prototype.constructor = self

        //返回一个新函数
        return Bound

    }
    function func(...arg){
        console.log(this);
        console.log(arg);
    }
    func.prototype.miaov = function (){
        console.log(123)
    }
    let newFunc = func.bind({a:1},1,2,3,4);
    //自定义bind函数
    let newFunc2 = func.customeBind({a:1},1,2,3,4)
    //构造函数
    let f1 =new newFunc(5,6,7,8)
    console.log(f1.miaov)
    let f2 =new newFunc2(5,6,7,8);
    console.log(f2.miaov)//undefined,因为f2是newFunc2的一个返回值创建出来的,这个返回值就是customeBind函数里面的匿名韩式创建出来的,而这个匿名函数于customeBind没有关联

原文地址:https://www.cnblogs.com/lyly96720/p/12110105.html

时间: 2024-10-25 21:11:00

手写bind源码的相关文章

手写Tomcat源码

http://search.bilibili.com/all?keyword=%E6%89%8B%E5%86%99Tomcat%E6%BA%90%E7%A0%81 tomcat源码分析一:https://www.bilibili.com/video/av47142833?from=search&seid=4812028364705422016 原文地址:https://www.cnblogs.com/2008nmj/p/11192327.html

[ios源码] 仿闲鱼二手交易平台-iOS源码-捡代码论坛

仿闲鱼二手交易平台-iOS源码-捡代码论坛 添加 首页模块和我的模块 首页水平滑动图利用自定义UICollectionViewFlowLayout实现 利用KVC,基于系统自带tabBar的进行定制实现底部TabBar. 页面跳转转场动画效果 封装刷新控件,仿闲鱼动画效果 动图演示(5.4M): Tag:闲鱼,iOS,动画,UICollectionView,视图布局 下载地址: 仿闲鱼二手交易平台-iOS源码-捡代码论坛http://bbs.jiandaima.com/thread-714-1-

DNS&BIND——源码编译bind9和DNS的压力测试

源码编译bind9 why-Source installation-bind9 安装rpm包那么方便,为什么要手动编译bind9呢,因为编译安装可以按照自己的需求拓展相应的模块,可以增加软件的灵活性哦~ how-Source installation-bind9 安装编译环境 编译源码通常都需要安装Devel包等~~~ [[email protected] yum.repos.d]# yum groupinstall "Development Tools" "Server P

网狐6603 cocos2dx 棋牌、捕鱼、休闲类游戏《李逵捕鱼》手机端完整源码分析及分享

该资源说明: cocos2d 棋牌.捕鱼.休闲类游戏<李逵捕鱼>手机端完整源码,网狐6603配套手机版源码,可以选桌子,适合新手学习参考,小编已亲测试,绝对完整可编译手机端,下载后将文件考到projects文件下面直接编译运行. 引擎版本:cocos2dx-2.2.6 资源下载:http://www.zccode.com/forum.php?mod=viewthread&tid=618&page=1&extra=#pid9095    

C语言写俄罗斯方块源码——————【Badboy】

#include <graphics.h> #include <stdio.h> #include <stdlib.h> char x,y,ty,ty1,zhuan,line1=0,line2=0,ss[16],hol[10][29]={0},a[4][2]={0}; int score1=0,speed=1000; void unit(char,char,char);           void dl(int); void block(char);        

神彩彩票系统门户版安卓手机端客户端源码

软件版本:V2.0软件大小:25MB软件类型:简体中文/国产软件/免费版软件分类:源码.java / android运行环境:Winxp/vista/win8/2000/2003/linux 解压密码是:php.662p.com我的联系QQ:2360 2486 66项目压缩包里有演示安装包,需要的朋友可以下载看看演示软件预览图:<ignore_js_op> <ignore_js_op> <ignore_js_op> <ignore_js_op> 软件简介:

bind 源码学习

Funtion.prototype.bind 改变函数执行上下文this指向,返回一个函数 // 简单版 Function.prototype.bind = function (context) { var _this = this; var args = Array.prototype.slice.call(arguments, 1) return function () { var innerArgs = Array.prototype.slice.call(arguments) var f

socket远程控制(练手)___源码

服务器端: #!/usr/bin/env python # -*- coding: utf-8 -*- # @Time    : 2017/8/22 16:14 # @Author  : Mr_zhang # @Site    :  # @File    : server.py # @Software: PyCharm # from socket import * # import subprocess # import struct # phone = socket(AF_INET,SOCK_

烈焰遮天 cocos 手游mmo 源码 解析

引擎: cocos2.x 代码: c++ 混合 lua 游戏类型: mmo 工程结构: game : 游戏启动地方 gamelogic:接sdk相关,登陆支付统计等 libFramework:主要本游戏相关c++库 uicontrol: zpack:一个开源的打包文件工具 ----------------------------------------------------------------------------------------- 分析libFramework: base目录