찾다
웹 프론트엔드JS 튜토리얼네이티브 자바스크립트를 사용하여 단계별로 바인드 분석을 구현합니다.

bind() 함수는 호출된 함수(바운드 함수의 대상 함수)와 동일한 함수 본문(ECMAScript 5 사양의 내장 호출 속성)을 갖는 새 함수(바운드 함수라고 함)를 생성합니다. . 대상 함수가 호출되면 this 값은 바인딩()의 첫 번째 매개변수에 바인딩되며 재정의될 수 없습니다. 바인딩된 함수가 호출되면 바인딩()은 원래 함수에 제공하기 위해 미리 설정된 매개변수도 허용합니다. 바인딩된 함수는 new 연산자를 사용하여 객체를 생성할 수도 있습니다. 이는 생성자로서 원래 함수처럼 동작합니다. 제공된 이 값은 무시되고 호출에 대한 인수는 모의 함수에 제공됩니다.

자바스크립트의 범위는 실행되는 환경에 따라 결정되기 때문에 함수 정의가 실제로 실행되는 환경과 다른 경우가 많고 이에 따라 범위도 변경됩니다.
예를 들어 다음과 같은 상황입니다.

var id = 'window';
//定义一个函数,但是不立即执行
var test = function(){
    console.log(this.id)
}
test() // window
//把test作为参数传递
var obj = {
    id:'obj',
    hehe:test
}
//此时test函数运行环境发生了改变
obj.hehe() // 'obj'
//为了避免这种情况,javascript里面有一个bind方法可以在函数运行之前就绑定其作用域,修改如下

var id = 'window';
var test = function(){
    console.log(this.id)
}.bind(window)
var obj = {
    id:'obj',
    hehe:test
}
test() // window
obj.hehe() // window

위에서 소개한 것처럼 바인딩 메소드의 중요한 역할은 범위를 함수에 바인딩하는 것입니다. 그러나 바인드 메소드는 하위 버전과 호환되지 않습니다. 브라우저에서 수동으로 구현할 수 있습니다.

핵심 아이디어 분할

bind 메소드는 함수를 바로 실행하지 않기 때문에 실행할 함수를 반환해야 한다(여기서는 클로저를 사용하고, 함수를 반환할 수 있음) return function(){ }

범위 바인딩, 여기서는 apply 또는 call 메서드를 사용하여 xx.call(yy)/xx.apply(yy)

매개변수 전달을 구현할 수 있습니다. 매개변수의 불확실성, 배열을 전달하려면 적용을 사용해야 합니다(예제는 더 명확합니다). xx.apply(yy,[...Array...]). 호출을 사용하면 편리하지 않습니다. 호출은 하나씩 나열되어야 합니다

구현

위의 아이디어로 대략적인 프로토타입은 이미 명확하고 코드는 구현하기 쉬워야 합니다

바인드 범위 , 바인드 매개변수 전송

Function.prototype.testBind = function(that){    var _this = this,        /*
        *由于参数的不确定性,统一用arguments来处理,这里的arguments只是一个类数组对象,有length属性
        *可以用数组的slice方法转化成标准格式数组,除了作用域对象that以外,
        *后面的所有参数都需要作为数组参数传递
        *Array.prototype.slice.apply(arguments,[1])/Array.prototype.slice.call(arguments,1)
        */
        slice = Array.prototype.slice,
        args = slice.apply(arguments,[1]);    //返回函数    
    return function(){        //apply绑定作用域,进行参数传递
        return _this.apply(that,args)
    }    
}

테스트

var test = function(a,b){  
  console.log('作用域绑定 '+ this.value)  
    console.log('testBind参数传递 '+ a.value2)    
    console.log('调用参数传递 ' + b)
}var obj = {
    value:'ok'}var fun_new = test.testBind(obj,{value2:'also ok'})

fun_new ('hello bind')// 作用域绑定 ok// testBind参数传递 also ok// 调用参数传递  undefined

동적 매개변수

바인드 메소드의 범위 바인딩은 위에서 구현했지만 연고에 파리는 함수를 반환하므로 매개변수 전달을 호출할 때 지원되어야 합니다. 분명히 위의 fun_new는 호출 시 매개변수 전달을 지원하지 않으며 testBind가 바인딩될 때만 매개변수를 전달할 수 있습니다. 왜냐하면 우리가 호출하게 되는 것은 이 반환 함수입니다. 🎜>

function(){
        return _this.apply(that,args)
    }    

这里面的args在绑定的时候就已经确定了,调用的时候值已经固定,
我们并没有处理这个function传递的参数。
변환합니다

return function(){        return _this.apply(that,
            args.concat(Array.prototype.slice.apply(arguments,[0]))
        )
    }
Array.prototype.slice.apply(arguments,[0]) 여기서는 반환 함수가 실행될 때 전달되는 일련의 매개 변수를 참조하므로 첫 번째 매개변수 [0]부터 시작하고, 이전 args = Slice.apply(arguments,[1]) 은 testBind 메서드가 실행될 때 전달된 매개변수를 참조하므로 두 번째 매개변수 [1]부터 시작하면 두 개는 본질적으로 서로 다르며 혼동될 수 없습니다. 둘이 병합된 후에만 반환된 함수의 전체 매개변수가

이므로 다음과 같은 구현이 있습니다.

Function.prototype.testBind = function(that){
    var _this = this,
        slice = Array.prototype.slice,
        args = slice.apply(arguments,[1]);
    return function(){
        return _this.apply(that,
                    args.concat(Array.prototype.slice.apply(arguments,[0]))
                )
    }    
}
Test

var test = function(a,b){
    console.log('作用域绑定 '+ this.value)
    console.log('testBind参数传递 '+ a.value2)
    console.log('调用参数传递 ' + b)
}
var obj = {
    value:'ok'
}
var fun_new = test.testBind(obj,{value2:'also ok'})

fun_new ('hello bind')
// 作用域绑定 ok
// testBind参数传递 also ok
// 调用参数传递  hello bind
위의 두 가지 매개변수 전달 방법에서는 args.concat(Array.prototype.slice.apply(arguments,[0]))에서 알 수 있듯이 바인드의 우선순위가 높으며 바인드의 매개변수가 앞에 있습니다. 배열의.

프로토타입 체인

공식 문서에 다음 문장이 있습니다:

A bound function may also be constructed using the new operator: doing
so acts as though the target function had instead been constructed.
The provided this value is ignored, while prepended arguments are
provided to the emulated function.
바운드 함수가 new에 의해 인스턴스화되면 프로토타입을 상속해야 함을 의미합니다. 원래 함수의 chain 메소드를 사용하고 바인딩 프로세스 중에 제공된 this는 무시되지만(원래 함수의 this 객체는 상속됨) 매개변수는 계속 사용됩니다.

여기서 프로토타입 체인을 전달하려면 전달 함수가 필요합니다.

fNOP = function () {} //创建一个中转函数
fNOP.prototype = this.prototype;
xx.prototype = new fNOP() 
修改如下
Function.prototype.testBind = function(that){
    var _this = this,
        slice = Array.prototype.slice,
        args = slice.apply(arguments,[1]),
        fNOP = function () {},
        //所以调用官方bind方法之后 有一个name属性值为 'bound '
        bound = function(){
            return _this.apply(that,
                args.concat(Array.prototype.slice.apply(arguments,[0]))
            )
        }    

    fNOP.prototype = _this.prototype;

    bound.prototype = new fNOP();

    return bound;
}
바인드 메소드의 첫 번째 매개변수인 this는 전달해야 하는 두 가지 상황이 있습니다.

직접바인드 호출 후 메소드

var f = function () { console.log('不传默认为'+this)  };f.bind()()
// 不传默认为 Window
로 나누어지므로 바인딩 메소드를 직접 호출할 경우 Apply(즉, Apply(that||window,)로 변경하는 것이 좋습니다. 실제로 변경하지 않아도 괜찮습니다. 통과하지 않으면 기본 지점은 window

new를 사용하여 바운드 메서드 인스턴스화

가 혼동되기 쉽습니다. new를 사용할 때 표준 바인드 메소드가 무엇을 하는지 파악한 다음 이를 명확하게 구현할 수 있습니다

여기서는 new 메소드가 어떤 작업을 수행하는지 확인해야 합니다. 예를 들어 var a = new b()

은 빈 객체 a = {}를 생성하고 이 변수 ​​참조는 이 빈 객체 a를 가리킵니다.

인스턴스화된 함수의 프로토타입 상속: a.__proto__ = b.prototype

被实例化方法b的this对象的属性和方法将被加入到这个新的 this 引用的对象中: b的属性和方法被加入的 a里面

新创建的对象由 this 所引用 :b.call(a)

通过以上可以得知,如果是var after_new = new bindFun(); 由于这种行为是把原函数当成构造器,那么那么最终实例化之后的对象 this需要继承自原函数, 而这里的 bindFun 目前是

function(){            return _this.apply(that || window,
                args.concat(Array.prototype.slice.apply(arguments,[0]))
            )
        }

这里apply的作用域是绑定的that || window,在执行 testBind()的时候就已经固定,并没有把原函数的this对象继承过来,不符合我们的要求,我们需要根据apply的特性解决这个问题:

在一个子构造函数中,你可以通过调用父构造函数的 `apply/call` 方法来实现继承

例如

function Product(name, price) {
  this.name = name;
  this.price = price;

  if (price < 0) {
    throw RangeError(&#39;Cannot create product &#39; +
                      this.name + &#39; with a negative price&#39;);
  }
}

function Food(name, price) {
  Product.call(this, name, price); 
  this.category = &#39;food&#39;;
}

//等同于(其实就是把Product放在Food内部执行了一次)
function Food(name, price) { 
    this.name = name;
    this.price = price;
    if (price < 0) {
        throw RangeError(&#39;Cannot create product &#39; +
                this.name + &#39; with a negative price&#39;);
    }

    this.category = &#39;food&#39;; 
}

所以在new新的实例的时候实时将这个新的this对象 进行 apply 继承原函数的 this 对象,就可以达到 new 方法里面的第 3 步的结果

apply(that||window,
//修改为 如果是new的情况,需要绑定new之后的作用域,this指向新的实例对象
apply(isNew ? this : that||window,  ==>

Function.prototype.testBind = function(that){
    var _this = this,
        slice = Array.prototype.slice,
        args = slice.apply(arguments,[1]),
        fNOP = function () {},
        //所以调用官方bind方法之后 有一个name属性值为 &#39;bound &#39;
        bound = function(){
            return _this.apply(isNew ? this : that||window,
                args.concat(Array.prototype.slice.apply(arguments,[0]))
            )
        }    

    fNOP.prototype = _this.prototype;

    bound.prototype = new fNOP();

    return bound;
}

这里的 isNew 是区分 bindFun 是直接调用还是被 new 之后再调用,通过原型链的继承关系可以知道,
bindFun 属于 after_new的父类,所以 after_new instanceof bindFun 为 true,同时
bindFun.prototype = new fNOP() 原型继承; 所以 fNOP 也是 after_new的父类, after_new instanceof fNOP 为 true

最终结果

Function.prototype.testBind = function(that){
        var _this = this,
            slice = Array.prototype.slice,
            args = slice.apply(arguments,[1]),
            fNOP = function () {},
            bound = function(){
                //这里的this指的是调用时候的环境
                return _this.apply(this instanceof  fNOP ? this : that||window,
                    args.concat(Array.prototype.slice.apply(arguments,[0]))
                )
            }    
        fNOP.prototype = _this.prototype;
    
        bound.prototype = new fNOP();
    
        return bound;
    }

我看到有些地方写的是

this instanceof fNOP && that ? this : that || window,

我个人觉得这里有点不正确,如果绑定时候不传参数,那么that就为空,那无论怎样就只能绑定 window作用域了。


성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
JavaScript로 문자열 문자를 교체하십시오JavaScript로 문자열 문자를 교체하십시오Mar 11, 2025 am 12:07 AM

JavaScript 문자열 교체 방법 및 FAQ에 대한 자세한 설명 이 기사는 JavaScript에서 문자열 문자를 대체하는 두 가지 방법 인 내부 JavaScript 코드와 웹 페이지의 내부 HTML을 탐색합니다. JavaScript 코드 내부의 문자열을 교체하십시오 가장 직접적인 방법은 대체 () 메소드를 사용하는 것입니다. str = str.replace ( "find", "replace"); 이 메소드는 첫 번째 일치 만 대체합니다. 모든 경기를 교체하려면 정규 표현식을 사용하고 전역 플래그 g를 추가하십시오. str = str.replace (/fi

내 자신의 JavaScript 라이브러리를 어떻게 작성하고 게시합니까?내 자신의 JavaScript 라이브러리를 어떻게 작성하고 게시합니까?Mar 18, 2025 pm 03:12 PM

기사는 JavaScript 라이브러리 작성, 게시 및 유지 관리, 계획, 개발, 테스트, 문서 및 홍보 전략에 중점을 둡니다.

브라우저에서 성능을 위해 JavaScript 코드를 최적화하려면 어떻게해야합니까?브라우저에서 성능을 위해 JavaScript 코드를 최적화하려면 어떻게해야합니까?Mar 18, 2025 pm 03:14 PM

이 기사는 브라우저에서 JavaScript 성능을 최적화하기위한 전략에 대해 설명하고 실행 시간을 줄이고 페이지로드 속도에 미치는 영향을 최소화하는 데 중점을 둡니다.

브라우저 개발자 도구를 사용하여 JavaScript 코드를 효과적으로 디버그하려면 어떻게해야합니까?브라우저 개발자 도구를 사용하여 JavaScript 코드를 효과적으로 디버그하려면 어떻게해야합니까?Mar 18, 2025 pm 03:16 PM

이 기사는 브라우저 개발자 도구를 사용하여 효과적인 JavaScript 디버깅, 중단 점 설정, 콘솔 사용 및 성능 분석에 중점을 둡니다.

jQuery 매트릭스 효과jQuery 매트릭스 효과Mar 10, 2025 am 12:52 AM

매트릭스 영화 효과를 페이지에 가져 오십시오! 이것은 유명한 영화 "The Matrix"를 기반으로 한 멋진 jQuery 플러그인입니다. 플러그인은 영화에서 클래식 그린 캐릭터 효과를 시뮬레이션하고 사진을 선택하면 플러그인이 숫자로 채워진 매트릭스 스타일 사진으로 변환합니다. 와서 시도해보세요. 매우 흥미 롭습니다! 작동 방식 플러그인은 이미지를 캔버스에로드하고 픽셀 및 색상 값을 읽습니다. data = ctx.getImageData (x, y, settings.grainsize, settings.grainsize) .data 플러그인은 그림의 직사각형 영역을 영리하게 읽고 jQuery를 사용하여 각 영역의 평균 색상을 계산합니다. 그런 다음 사용하십시오

간단한 jQuery 슬라이더를 만드는 방법간단한 jQuery 슬라이더를 만드는 방법Mar 11, 2025 am 12:19 AM

이 기사에서는 jQuery 라이브러리를 사용하여 간단한 사진 회전 목마를 만들도록 안내합니다. jQuery를 기반으로 구축 된 BXSLIDER 라이브러리를 사용하고 회전 목마를 설정하기위한 많은 구성 옵션을 제공합니다. 요즘 그림 회전 목마는 웹 사이트에서 필수 기능이되었습니다. 한 사진은 천 단어보다 낫습니다! 그림 회전 목마를 사용하기로 결정한 후 다음 질문은 그것을 만드는 방법입니다. 먼저 고품질 고해상도 사진을 수집해야합니다. 다음으로 HTML과 일부 JavaScript 코드를 사용하여 사진 회전 목마를 만들어야합니다. 웹에는 다양한 방식으로 회전 목마를 만드는 데 도움이되는 라이브러리가 많이 있습니다. 오픈 소스 BXSLIDER 라이브러리를 사용할 것입니다. BXSLIDER 라이브러리는 반응 형 디자인을 지원 하므로이 라이브러리로 제작 된 회전 목마는

JavaScript로 구조 마크 업 향상JavaScript로 구조 마크 업 향상Mar 10, 2025 am 12:18 AM

JavaScript를 사용하여 강화 된 구조적 태그를 향상 시키면 파일 크기를 줄이면 웹 페이지 컨텐츠의 접근성 및 유지 관리 가능성을 크게 향상시킬 수 있습니다. JavaScript는 인용 속성을 사용하여 참조 링크를 블록 참조에 자동으로 삽입하는 등 HTML 요소에 기능을 동적으로 추가하는 데 효과적으로 사용될 수 있습니다. 구조화 된 태그와 JavaScript를 통합하면 페이지 새로 고침이 필요하지 않은 탭 패널과 같은 동적 사용자 인터페이스를 만들 수 있습니다. JavaScript가 웹 페이지의 기본 기능을 방해하지 않도록하는 것이 중요합니다. 고급 JavaScript 기술을 사용할 수 있습니다 (

Angular로 CSV 파일을 업로드하고 다운로드하는 방법Angular로 CSV 파일을 업로드하고 다운로드하는 방법Mar 10, 2025 am 01:01 AM

데이터 세트는 API 모델 및 다양한 비즈니스 프로세스를 구축하는 데 매우 필수적입니다. 그렇기 때문에 CSV 가져 오기 및 내보내기가 자주 필요한 기능인 이유입니다.이 자습서에서는 각도 내에서 CSV 파일을 다운로드하고 가져 오는 방법을 배웁니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

DVWA

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

VSCode Windows 64비트 다운로드

VSCode Windows 64비트 다운로드

Microsoft에서 출시한 강력한 무료 IDE 편집기

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.