深入bind

Vultr 发布于2019-08-23 15:20 / 2555人阅读

摘要：今天来聊聊关于之前的跟查看此链接我们要明确点内容之后返回一个函数改变并且可以传参之后的函数仍旧可以传参陈孙李张三李四陈孙李张三李四，之后的函数做为构造函数执行，是作为新的一个引用坤坤坤坤作为构造函数时候在原型上添加属性实例能找到这个属性坤坤

今天来聊聊bind 关于之前的call跟apply 查看此链接

我们要明确4点内容

1. bind之后返回一个函数

</>复制代码 
let obj = {
    name : "skr"
}
function fn(){
    console.log(this)
}
let bindfn = fn.bind(obj)
console.log(typeof bindfn) // function

2.bind改变this 并且可以传参 bind之后的函数仍旧可以传参

</>复制代码 
let obj = {
    name : "skr"
}
function fn(){
    console.log(arguments,this)
}
let bindfn = fn.bind(obj,"陈","孙","李")
bindfn("张三李四")  //[Arguments] { "0": "陈", "1": "孙", "2": "李", "3": "张三李四" }，{ name: "skr" }

3.bind之后的函数做为构造函数执行，this是作为新的一个引用

</>复制代码 
let obj = {
    name : "skr"
}
function fn(name){
    this.name = name 
    console.log(this)  //{ name: "坤坤" }
    console.log(obj) //{ name: "skr" }
}
let bindfn = fn.bind(obj)
let obj2 = new bindfn("坤坤")

4 作为构造函数时候在原型上添加属性实例能找到这个属性

</>复制代码 
let obj = {
    name : "skr"
}
function fn(name){
    this.name = name 
    console.log(this)  //{ name: "坤坤" }
    console.log(obj) //{ name: "skr" }
}
let bindfn = fn.bind(obj)
let obj2 = new bindfn("坤坤")  
fn.prototype.arrt = "小生"
console.log(obj2.arrt)  // 小生

实现一个bind

遵循以上4点

bind之后返回一个函数

</>复制代码 
Function.prototype.bind = function(){
    return function(){
        // 代码省略
    }
}

bind改变this 并且可以传参 bind之后的函数仍旧可以传参

</>复制代码 
Function.prototype.bind = function(context){
    let _this = this 
    let args = Array.prototype.slice.call(arguments,1)  // 保存外部函数的参数
    return function(){
        return _this.apply(context,args.concat(Array.from(arguments)))  // 链接内部函数参数
    }
}
let obj = {
    name :"1"
}
function a(){
    console.log(this,arguments)
}
a.bind(obj,1,2,3,4,5,6)(7,8,9) 
/*
打印结果：
{ name: "1" } [Arguments] {
  "0": 1,
  "1": 2,
  "2": 3,
  "3": 4,
  "4": 5,
  "5": 6,
  "6": 7,
  "7": 8,
  "8": 9 } */

bind之后的函数做为构造函数执行，this是作为新的一个引用

</>复制代码 
Function.prototype.bind = function(context){
    let _this = this 
    let args = Array.prototype.slice.call(arguments,1)  // 保存外部函数的参数
    let fn2 = function(){
        return _this.apply(this instanceof fn2 ? this:context ,args.concat(Array.from(arguments)))   // 看看是否是new 出来的 是new的话就不改变this 
    }   
    return fn2
}
let obj = {
    name :"1"
}
function a(name){
    this.name = name 
    console.log(this)
}
let bindfn = a.bind(obj) 
let obj2 = new bindfn("2")  // {name:"2"}
console.log(obj) // {name:"1"}

作为构造函数时候在原型上添加属性实例能找到这个属性

</>复制代码 
Function.prototype.bind = function(context){
    let _this = this 
    let args = Array.prototype.slice.call(arguments,1)  // 保存外部函数的参数
    function ConS(){}
    let fn2 = function(){
        return _this.apply(this instanceof fn2 ? this:context ,args.concat(Array.from(arguments)))   // 看看是否是new 出来的 是new的话就不改变this 
    } 
    console.log(this)
    ConS.prototype = this.prototype  // 通过第三方  new ConS().__proto__  === this.prototype  
    fn2.prototype = new ConS()   //  new fn2().__proto__ === new ConS() ---> new fn2().__proto__.__proto__ === this.prototype  从而拿到this实例上的原型属性和方法
    return fn2
}
let obj = {
    name :"1"
}
function a(name){
    this.name = name 
    console.log(this)
}
let bindfn = a.bind(obj) 
let obj2 = new bindfn("2")  // {name:"2"}
console.log(obj2) // {name:"1"}

大致上就是这样了

GPU云服务器云服务器 bind() bindings Binding bind

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

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

JavaScript深入之bind的模拟实现

摘要：也就是说当返回的函数作为构造函数的时候，时指定的值会失效，但传入的参数依然生效。构造函数效果的优化实现但是在这个写法中，我们直接将，我们直接修改的时候，也会直接修改函数的。 JavaScript深入系列第十一篇，通过bind函数的模拟实现，带大家真正了解bind的特性 bind 一句话介绍 bind: bind() 方法会创建一个新函数。当这个新函数被调用时，bind() 的第一个参数...

FingerLiu 2019-08-20 16:15 评论0 收藏0
jQuery中.live()方法的用法深入解析

摘要：事件委托方法能对一个还没有添加进的元素有效，是由于使用了事件委托绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。执行由绑定的特殊的事件处理函数。这个事件处理函数首先检测事件对象的来确定是不是需要继续。概述jQuery给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。这个方法是基本是的 .bind() 方法的一个变体。使用 .bind()时，选...

wenyiweb 2019-08-19 17:59 评论0 收藏0
深入call apply bind

摘要：众所周知，这三个函数都是改变执行上下文的，那么我们来捋一捋，这些函数内部到底做了什么。前言稍微翻了一下call，apply， bind 的各种论坛上的文章，发现讲的都太浅了，大部分都只讲了个用法，对于实现的原理却都没有提，因此，在这里，我写下这篇文章，希望能让大家认识到原理所在。众所周知，这三个函数都是改变执行上下文的，那么我们来捋一捋，这些函数内部到底做了什么。 c...

Alex 2019-08-23 15:18 评论0 收藏0
es6箭头函数深入学习1

摘要：基本用法允许使用箭头定义函数。不可以当作构造函数，也就是说，不可以使用命令，否则会抛出一个错误。箭头函数绑定，很大程度上解决了这个困扰。函数绑定箭头函数可以绑定对象，大大减少了显式绑定对象的写法。基本用法ES6允许使用箭头（=>）定义函数。 var f = v => v;上面的箭头函数等同于： var f = function(v) { return v;};如果箭头函数不需要参数...

娣辩孩 2019-08-23 14:21 评论0 收藏0
【进阶 6-2 期】深入高阶函数应用之柯里化

摘要：引言上一节介绍了高阶函数的定义，并结合实例说明了使用高阶函数和不使用高阶函数的情况。我们期望函数输出，但是实际上调用柯里化函数时，所以调用时就已经执行并输出了，而不是理想中的返回闭包函数，所以后续调用将会报错。引言上一节介绍了高阶函数的定义，并结合实例说明了使用高阶函数和不使用高阶函数的情况。后面几部分将结合实际应用场景介绍高阶函数的应用，本节先来聊聊函数柯里化，通过介绍其定义、比较常见的...

stackvoid 2019-05-22 19:25 评论0 收藏0