大家好!!!注册一年多的第一篇博客。

自我介绍: 本人非计算机专业出身,转行进入前端半年时间,写的东西可能观赏性不强,一起进步吧道友们。。。

接下来的一段时间, 我都会不定期整理自己理解的js知识点, 欢迎各路道友吐槽。

进入正题......  (针对新手,老司机不要嘲笑我)

首先, bind/call/apply 这改变this指向的三兄弟我们都很熟悉了, 还有其他改变this指向的方法这里就不多说了哈,要不就跑题了。。。。

你需要知道的前提 : 这三货都是函数原型(Function.prototype)上的方法, 所以只有函数可以调用。

              小白 : “原型是啥?”   每一个构造函数(其实就是普通函数,函数名首字母大写而已)都有一个prototype原型对象,当你引用某个实例对象上的属性时, 会先查找该对象本身有没有该属性,有就用,没有就会去构造这个实例的构造函数的原型上去找,还没有的话就会沿着构造函数的原型对象的__proto__属性往上找......haha, 好像又跑题了, 关于原型链和继承可以自行百度

真的进入正题。。。。。。

它们不是函数上的方法吗, 我们先定义个函数, 后面来改变这个函数的this指向

function out(age, sex, type) {
console.log(age, sex, this.age, this.sex, type);
}

分别输出传入的参数age, sex, type  和   this 上的age , sex,

然后定义个对象, 后面让this指向该对象,  没错,此对象描述的就是我

let  my = {
age : 16,
sex : 'handsome man'
};

先试试bind, 先会用然后再来实现, 由于bind可以传两次参数,你可以这样传

const bindFunction = out.bind(my,50); //this 指向my 不会直接执行 返回一个明确this指向的函数
bindFunction('women','bind'); // 传参执行

还可以这样传,想怎么传就怎么传,只要确保.bind后的第一个参数是你要改变this指向的对象, (如果什么都不传,this指向window)

const bindFunction = out.bind(my); //this 指向my 不会直接执行 返回一个明确this指向的函数
bindFunction('50','women','bind'); // 传参执行

执行后输出 :

50 "women" 16 "handsome man" "bind"

总结一下我们要模拟的bind

1.  函数A调用bind返回一个可执行的函数B, 调用bind时可传参 可不穿参, 不穿参时this指向window

2.  调用B可继续传参, 两次传参合并

3.   new B() 的构造函数依然是A, 而不是B,并且因为new操作符改变this指向的优先级最高,所以如果使用了new操作符,this指向不应该变,就是该是啥是啥(划重点)

上代码 :

Function.prototype.myBind = function (target) { // bind 是 function 上的 方法  this 指向 target
if (typeof this !== 'function') {
throw new TypeError('not a function')
};
const _this = this, // 保存一下this
args = Array.prototype.slice.call(arguments, 1),// arguments是类数组,没有 slice 方法 保存第一次传入的参数
temp = function () {}; // 定义一个中间函数
const f = function () {
return _this.apply(this instanceof temp ? this : (target || window), args.concat([].slice.call(arguments))); // 合并两次传的参数
};
temp.prototype = _this.prototype; // 让temp 的原型 等于 this的原型
f.prototype = new temp(); //f 继承 temp 圣杯继承可以了解下
return f;
};

先正常执行一下myBind:

  const bind1 = this.out.myBind(my, 50);
// const bind2 = new bind1('women','myBind');
  const bind3 = bind1('women','myBind');

结果是:

50 "women" 16 "handsome man" "myBind"

OK , 和bind的输出结果一样

再使用new操作符:

  const bind1 = this.out.myBind(my, 50);
const bind2 = new bind1('women','myBind');
// const bind3 = bind1('women','myBind');

结果是这样:此时this不再指向my, 而是指向new 出来的一个空对象,所以this上没有age和sex两个属性

50 "women" undefined undefined "myBind"

到此bind 我们已经完美模拟出来了  -------- 是不是有点小激动 ----------细心的道友会发现myBind 里 还借用了call 和apply!!! 这还不行啊

自己动手用原生实现 bind/call/apply的更多相关文章

  1. 自己手动用原生实现bind/call/apply

    自己手动用原生实现bind/call/apply:https://www.cnblogs.com/LHLVS/p/10595784.html

  2. 面试官:能解释一下javascript中bind、apply和call这三个函数的用法吗

    一.前言    不知道大家还记不记得前几篇的文章:<面试官:能解释一下javascript中的this吗> 那今天这篇文章虽然是介绍javascript中bind.apply和call函数 ...

  3. bind、apply与call

    bind.apply与call 先说观点:不论是bind.apply还是call,最大的好处就是代码复用. bind 在开发中,我们只有复用代码时,才会出现this指向需要改动的情况. 纵观bind的 ...

  4. Bind、Apply、Call三者的区别

    1)bind与apply.call 的最大区别就是:bind不会立即调用,其他两个会立即调用 var fn = { _int: function(){return 3}, fun: function( ...

  5. 深入理解this和call、bind、apply对this的影响及用法

    首先看一道网易的面试题: var a = { a:"haha", getA:function(){ console.log(this.a); } } var b = { a:&qu ...

  6. bind call apply 的区别和使用

    bind call apply 的区别和使用:https://www.jianshu.com/p/015f9f15d6b3 在讲这个之前要理解一些概念,这些概念很重要,有人说过学会了javascrip ...

  7. 也谈如何实现bind、apply、call

    也谈如何实现bind.apply.call 我们知道,JavaScript的bind.apply.call是三个非常重要的方法.bind可以返回固定this.固定参数的函数包装:apply和call可 ...

  8. javascript 面向对象学习(三)——this,bind、apply 和 call

    this 是 js 里绕不开的话题,也是非常容易混淆的概念,今天试着把它理一理. this 在非严格模式下,总是指向一个对象,在严格模式下可以是任意值,本文仅考虑非严格模式.记住它总是指向一个对象对于 ...

  9. js修改函数内部的this指向(bind,call,apply)

    js修改函数内部的this指向 在调用函数的时候偶尔在函数内部会使用到this,在使用this的时候发现并不是我们想要指向的对象.可以通过bind,call,apply来修改函数内部的this指向. ...

随机推荐

  1. 推荐一个比crontab更好用的东西:crongo

    This is a crontab service that supports hot plug and high performance. In addition, it supports seco ...

  2. Linux时间子系统之五:低分辨率定时器的原理和实现

    专题文档汇总目录 Notes:低精度timer在内核中的数据结构以及API接口:低精度timer精巧高效的分组,使用cascade进行定时器移位,组内Timer FIFO:低精度Timer的初始化流程 ...

  3. Linux kernel的中断子系统之(三):IRQ number和中断描述符

    返回目录:<ARM-Linux中断系统>. 总结: 二描述了中断处理示意图,以及关中断.开中断,和IRQ number重要概念. 三介绍了三个重要的结构体,irq_desc.irq_dat ...

  4. 用react重构个人网站 3-22

    问题一:import React from 'react'这个写法是怎么回事? 答案:require是common.js的写法,import是ES6的写法,主要功能都是引入模块,写法上: var mo ...

  5. com.mysql.jdbc.Driver 和 com.mysql.cj.jdbc.Driver的区别 serverTimezone设定

    转自: http://blog.csdn.net/superdangbo/article/details/78732700 com.mysql.jdbc.Driver 和 com.mysql.cj.j ...

  6. go语言nsq源码解读二 nsqlookupd、nsqd与nsqadmin

    nsqlookupd: 官方文档解释见:http://bitly.github.io/nsq/components/nsqlookupd.html 用官方话来讲是:nsqlookupd管理拓扑信息,客 ...

  7. SSH(Spring_SpringMVC_Hibernate)

    Users实体类 package com.tao.pojo; public class Users { private int id; private String name; private Str ...

  8. CSS实现核辐射警告标志

    今天做了下360的前端星计划测试题,碰到一个有趣的css题,实现如下图效果,记得上次也是在360面试的时候碰到一个有趣的css实现宝马logo,不得不说360的面试题还是很有创意的. 我一直努力想用一 ...

  9. 【gcd+stl】UVa1642 Magical GCD

    Description 一个长度为n的数列,选一个连续子序列,使得子序列的公约数*长度最大,求这个最大值.n<=1e5. Solution 连续子序列一般都要用滑动窗口是吧(固定r,快速计算最优 ...

  10. BZOJ_[usaco2007 Nov]relays 奶牛接力跑_离散化+倍增弗洛伊德

    BZOJ_[usaco2007 Nov]relays 奶牛接力跑_离散化+倍增弗洛伊德 Description FJ的N(2 <= N <= 1,000,000)头奶牛选择了接力跑作为她们 ...