이에 대한 예제 튜토리얼과 JavaScript의 객체 프로토타입

this 및 객체 프로토타입

this은 매우 특별한 키워드로 모든 함수의 범위에서 자동으로 정의됩니다

// foo.count 는 0이며 리터럴 해석이 잘못되었습니다

function foo(num) {

console.log("foo:"+ num);

this.count++;

}

foo.count = 0;

var i ;

for(i = 0;i

if(i>5){

foo(i)

}

}

console.log(foo.count) //0

　　　　

// 문제를 해결하려면 어휘 범위를 사용하세요

function foo(num) {

 console.log("foo:"+ num);

 data.count++;

}

var data = {

 count:0

) log (data.count); // 4

//

함수 객체를 참조하려면

this

대신

foo

식별자를 사용하세요.

는

문제를 방지합니다. this

변수 foo의 어휘 범위에 전적으로 의존합니다. function foo(num) { console.log("foo:"+ num); foo.count++;}foo.count = 0var i;for(i= 0;i if(i>5){

foo(i)

}

}

console.log(foo.count) //4

/ /

Force

this

가

foo

함수 객체

function foo(num) {

console.log("foo:"+num);this.count++ } foo .count = 0; var i; for(i=0; i if(i>5){

foo.call(foo,i);

}

}

console.log(foo.count) //4

this는 작성할 때가 아니라 런타임에 바인딩됩니다. 해당 컨텍스트는 함수가 호출될 때 다양한 조건에 따라 달라집니다, this의 바인딩에는 아무것도 없습니다. 함수 선언의 위치와 관련하여 함수가 호출되는 방식에만 의존합니다 .

this종합 분석

콜 스택 및 호출 위치

function baz(){

//현재 호출 스택은 다음과 같습니다. baz

// 따라서 현재 호출 위치는 전역 범위입니다

console.log("baz");

bar() // <--bar

}

function bar(){

//의 호출 위치 current 호출 스택은 다음과 같습니다. baz-> bar

// 따라서 현재 호출 위치는 baz

console.log("bar);

foo(); // < ;-- foo의 호출 위치

}

function foo(){

//현재 호출 스택은 baz->foo

// 따라서 현재 호출 위치는 bar

console.log("foo");

}

baz() // <-- baz 호출 위치

비엄격 모드에서만 실행됩니다. 기본 바인딩은 전역 객체에만 바인딩될 수 있습니다.

객체 속성 참조 체인의 맨 위 또는 마지막 레이어만 호출 위치에 영향을 미칩니다.

function foo() {

console.log(this .a);

}

var obj2 = {

a: 42,

foo:foo

};

var obj1 = {

a:2,

obj2 : obj2

};

obj1.obj2.foo(); // 42

하드 바인딩의 일반적인 응용 시나리오는 래퍼 함수를 ​​만들고, 모든 함수를 전달하고, 수신된 모든 값을 반환하는 것입니다 ​​

function foo(something).{

console.log(this.a,something);

return this.a + Something;

};

var obj = {

a:2

};

var bar = function () {

return foo.apply(obj,arguments);

};

var b = bar(3) ; // 2 3

console.log(b) // 5

other 한 가지 방법은 재사용할 수 있는 i 도우미 함수를 만드는 것입니다.

function foo(something){

console.log(this.a, Something);

return this.a + Something;

}

// 간단한 보조 바인딩 기능

functionbind(fn,obj){

return function(){

return fn.apply(obj,arguments);

};

}

var obj = {

a:2

}

var bar = 바인딩(foo,obj);

var b = bar(3); // 2 3

console.log(b) // 5

ES5 내장 메소드 제공 Function.prototype.bind, 바인딩(..) 은

매개변수를 this의 컨텍스트로 설정하고 원래 함수를 호출하는 하드코딩된 새 함수를 반환합니다.

function foo(something){

console.log(this.a, Something);

return this.a + Something;

}

var obj = {

a:2

}

var bar = foo.bind(obj);

var b = bar(3); // 3 5

console.log(b) // 5

API 컨텍스트 호출

function foo( el ){

console.log(el,this.id);

}

var obj = {

id: "awesome'

}

// Call foo(..) 언제 this 를 obj

[1,2,3].forEach(foo,obj);

/// 1 awesome 2 awesome 3 awesome

new에 바인딩하면 함수 호출 시간에 영향을 미칠 수 있습니다 this 동작을 바인딩하는 방법

function foo(a){

this.a = a;

}

var bar = new foo(2);

console.log(bar.a) ; // 2

Judge this

1. new (new 바인딩)에서 호출된 함수인가요? 그렇다면 this 가 새 개체에 바인딩됩니다.

var bar = new foo();

2.

call을 통해 호출된 함수는 Apply(Explicit 바인딩) 입니까, 아니면 하드 바인딩입니까? 그렇다면 this이 개체를 지정합니다.

va bar = foo.call(obj2)

3.

컨텍스트 객체에서 함수가 호출되는지 여부(암시적 바인딩 ) 그렇다면 이 바인딩은? 은 해당 컨텍스트에 있습니다.

var bar = obj1.foo()

4.

엄격 모드에서는 기본 바인딩을 사용하고, 그렇지 않으면 에 바인딩됩니다. 전역 객체 var bar = foo();

소프트 바인딩

function foo(){

console.log("name:" + this.name);

}

var obj = {이름: "obj"},

obj2 = {이름: "obj2"},

obj3 = {이름: "obj3" },

obj3 = {이름: "obj3"};

var foo0BJ = foo.softBind(obj);

foo0BJ(); // 이름:obj

obj2.foo = foo.softBind(obj);

obj2.foo(); --보세요!

setTimeout(obj2.foo,10);

// name:obj <--- 소프트 바인딩 적용됨

위 내용은 이에 대한 예제 튜토리얼과 JavaScript의 객체 프로토타입의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!