1. 적용 사례 :
var Mouse = function () {
// 아니예요!
this.position = [0, 0]
if (document.addEventListener) {
document.addEventListener('mousemove', ? ); / /this.move?
} else if (document.attachEvent) {
document.attachEvent("onmousemove", ?) //this.move? 삽입 방법
🎜>};
Mouse.prototype.move = function (arg1,arg2,event) {
event = window.event || event;
var x = event.pageX || 🎜>y = event .pageY || event.offsetY;
this.position = [x, y]
this.log(arg1,arg2)
마우스. 프로토타입.log = function (arg1, arg2) {
console.log(arg1 "," arg2)
console.log(this.position)
>new Mouse();
위의 '?' 숫자가 무엇인지 아시나요? 이동 메서드를 문서의 mousemove에 바인딩하려고 하는데 이 경우 Mouse.prototype.move에 문제가 발생했습니다. 🎜> 이것은 마우스 개체를 가리키지 않습니다. 누구나 이 문제에 자주 직면할 것입니다. 어쩌면 이미 해결 방법을 알고 있을 수도 있지만 더 빠르고 간단한 방법이 있습니까?
Function.prototype.bind( ) 마법같은 일이지만 IE6, 7, 8에서는 지원하지 않습니다. 대부분의 최신 브라우저에서는 이를 지원합니다.
물론 우리는 이런 좋은 방법을 모방해야 합니다. 흉내내는 것은 아래의 Nothing's 독창적인 방법입니다.
코드 복사
return function () {
var args = Array.prototype .slice.call(arguments);
-->여기의 인수는 외부 인수와 동일하지 않습니다.
예를 들어, 인수[ 0]= 여기에서 [object Event]는 이 이벤트 내의 e 매개변수입니다.
Array.prototype.unshift.apply(args, privateArgs)
-->gt; 이는 기본 바인딩과 마찬가지로 구현됩니다. 매개 변수 형식
//-> 여기서는 a=new Mouse();a.move(1,2)
//이 이동 메소드에 매개변수가 없는 경우(prototype.move=fn(){arguments}를 의미),
//매개변수를 전달했습니다,args.length=3,
//arguments[0] =1,arguments[1] =2,arguments[2]=[object event].
return fn.apply(target, args);
}
//여기가 복잡한 이유는 다음과 같습니다. 예를 들어 프록시 함수에 매개 변수를 전달하지 않고 직접
을 사용하여 인수에 직접 액세스할 수 있습니다. 이렇게 하면 인수에 네이티브 인수와 동일한 개체가 포함됩니다. Function.prototype.bind,
//여기에 코드가 있습니다. 여기 네이티브 바인드의 인수가 무엇인지 이해하지 못하기 때문에 심오합니다. 알면 제가 왜 자체 인수를 바인딩하는지 알게 될 것입니다
//이렇게 많은 작업을 수행하는 주요 목적은 프록시 중인 함수 내부의 인수를 function.prototype.bind의 인수 개체에 포함된 내용과 일치하게 만드는 것입니다.
}
return function () {
return fn .apply(target, 인수);
}
}
return proxy.apply(null, 인수)
}/*네이티브 지원 및 네이티브 사용*/
함수 .prototype.bind = Function.prototype.bind ||
function (target ) { //여기서는 프록시할 함수를 나타냅니다.
if (1
var args = Array.prototype.slice.call(arguments, 1); //매개변수 List
args.unshift(this, target); //이 인수는 결국 [this, 바인딩된 개체, 매개변수 목록]이 됩니다.
return proxy.apply(null, args);
-- 직접 프록시(args)를 하면 문제가 발생하며 args가 프록시 함수의 매개 변수가 되어 오류가 보고됩니다.
여기서 주요 작업은 작업을 분리하는 것입니다. 프록시는 프록시와 매개변수가 프록시에 전달되는 방식에만 관심이 있습니다. 매개변수가 없으면
프록시(this, target)--> return fn.apply(target,argers); 이게 17층의 답입니다
--> 다들 17층과 같은 실수를 하게 될 것 같아요. 여기서 Arguments 객체가 이렇게 복잡한 이유는 무엇일까요? 단지 프록시 함수에 전달되고 인수 객체가 만료되지 않는지 확인하는 것입니다.
}
return Proxy(this, target)
})
왜 위 코드에서 프록시를 계속 반환해야 하나요? 이렇게 하면 this.move.bind(this,1,2)()를 호출하면 즉시 실행됩니다. 함수!
위 코드를 이용하면 "?"라는 코드를 쉽게 구현할 수 있습니다. 여기에는 어떤 코드를 작성해야 할까요 ^_^ 간단합니다
코드
코드는 다음과 같습니다.
if (document.addEventListener) {
document.addEventListener('mousemove', this.move.bind(this,1,2))
} else if (document.attachEvent) {
document.attachEvent("onmousemove", this.move.bind(this,1,2));
}
이벤트가 발생할 때마다 추가해야 합니까? future를 호출하고, 메소드의 this는 다른 객체를 가리키고 싶어하는데 아주 간단하지 않나요?
위 코드는 다들 이해하기 어려울 것 같으니 좀 더 간단하게 만들어 보겠습니다
var a = function() {
console.log (arguments[0]); //1
console.log(arguments[1]); //2
console.log(this.key1)
//이런 방식으로 매개변수를 바인딩하는 경우 , 내 매개변수는 기본 바인딩과 동일하게 나열될 수 있습니다.
var b = {
key1: "value1"
}; , 1, 2)();
17층 동급생의 코드 오류를 반박하면 많은 분들이 저지르게 될 코드는 다음과 같습니다
Function.prototype.bind = function(대상) {
var self = this;
return function () {
return self.apply(target, 인수) ; //여기 인수는 전혀 전달할 수 없습니다.
}
}
var a = function () {
console.log(arguments.length); // 이렇게 바인딩하면 인수 매개변수가 유효하지 않게 됩니다.
//arguments.length=0.console.log(this. key1);
var b = {
key1: "value1"
}
a.bind(b, [1, 2], 3)(); 여기에서 예상되는 인수.길이=2
//이것이 내가 인수 매개변수를 공들여 조작하는 이유입니다
/ /여기 있는 대부분의 사람들이 그것이 옳다고 생각할 것이라는 것을 알고 있지만 당신은 틀렸습니다. 17층 학생들은 그래도 생각해봐야죠
댓글 없는 소스코드,
코드복사
var Proxy = function () {
if (2 < 인수.길이) {
var privateArgs = Array.prototype.slice.call(arguments, 2);
return function () {
var args = Array.prototype.slice.call( 인수);
Array.prototype.unshift.apply(args,privateArgs);
return fn.apply(target, args)
}
}
return 함수() {
return fn.apply(target, 인수);
}
}
return proxy.apply(null, 인수)
}/*기본 사용 지원*/
Function.prototype.bind = Function.prototype.bind ||
함수(대상) {
if (1 < 인수.길이) {
var args = Array.prototype.slice.call(arguments , 1);
args.unshift(this, target);
return proxy.apply(null, args)
return proxy(this, target)
})();
이 기사는 이전 기사에 이어 설명하겠습니다. 자세한 예를 보지 못했다면 클릭하세요.
예제를 먼저 읽어보세요. 이 블로그는 멋진 레이아웃을 만들 시간이 없고 간단한 코드만 있습니다.
코드 복사
코드는 다음과 같습니다.
var Mouse = function () { if (document.addEventListener) { document.addEventListener('mousemove', this .move.bind(this,1,2,[3,4])); } else if (document.attachEvent) { document.attachEvent("onmousemove", this .move.bind(this, 1,2,[3,4]));
}
};
Mouse.prototype.move = function () {
console.log(arguments[ 인수.길이-1]. clientX);
여기서 나온 인수 결과는 위 코드를 잘 설명합니다. 🎜>
코드 복사
코드는 다음과 같습니다.
var privateArgs = Array.prototype.slice.call (인수, 2);
//에이전트의 매개변수를 나타내는 개인 매개변수(여기서는 1,2,[3,4]를 나타냄) return function () { var args = Array.prototype. Slice .call(arguments); //여기의 매개변수는 이벤트 함수 내부의 e와 같은 대리자의 매개변수를 나타냅니다. Array.prototype.unshift.apply(args, privateArgs)// 여기서는 두 매개변수가 함께 병합되고, 그 다음에는 개인 매개변수가 먼저 옵니다. 원래 매개변수 순서와 일치하도록 하는 것입니다. return fn.apply(target, args)//병합된 매개변수는 다음과 같습니다. 여기에 1,2,[3,4]를 포함하여 e가 전달되어 적용됩니다
}
좋아, 여기에 오면 좋은 js 기술을 찾을 수 있습니다. 즉, e=window.event||e를 직접 처리할 필요가 없고 인수[arguments.length-1]를 직접 사용할 수 있습니다. ] 표현된 모든 브라우저와 호환됩니다
이벤트 e 개체는 코드와 사고 시간을 많이 절약합니다
내가 이 코드를 작성한 이유는 모든 사람이 js 코드를 실제로 이해하고 알 수 있기를 바랍니다. js의 진짜 매력이라면 적어도 이 글을 읽고 나면
의 내용이 무엇인지 알 수 있을 것입니다. 이 블로그는 매우 초라하고 간단한 코드만 있어서 js 코드 매니아가 배우기에 적합합니다. 사실, js의 진짜 매력은 이것으로 끝나지 않습니다. 위의 예시와 설명으로, 모르신다면 몇 번 데모를 해보면 거의 이해되실 거라 생각합니다. 모두가 배울 수 있도록 수시로 새로운 코드를 게시할 예정입니다. 이 책의 목적은 js 코드의 본질을 함께 배우는 것입니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
