자바스크립트에서 이 키워드에 대한 자세한 설명
- 巴扎黑원래의
- 2016-12-22 13:37:481041검색
어떤 지식을 배우든, 배운 지식의 목록을 만드는 데 익숙해지면 생각을 명확하게 하는 데 도움이 되며 좋은 학습 방법입니다. 적극 권장합니다.
다음 내용은 조금 길므로 인내심을 갖고 읽어주시길 바랍니다.
다음 내용은 다음과 같은 부분으로 나누어집니다.
1. 의미
1.1: 이것의 의미
1.2: 이것의 가변성 point
2. 사용 상황
2.1: 전역 환경
2.2: 생성자
2.3: 객체 메서드
3. 참고 사항
3.1: this의 다중 레벨 중첩을 피하세요
3.2: 배열 처리 방법에서 this
를 피하세요 3.3: 콜백 함수에서 this
를 피하세요 1 . 의미
1.1: 이
의 의미 생성자와 new 키워드의 관계에 대해 쓴 블로그 게시물에서 언급했듯이 new 키워드는 항상 객체를 반환합니다. 이 객체는 new가 생성자를 호출할 때 반환되는 빈 객체이거나 생성자의 return 문을 사용하여 반환되는 복잡한 데이터 유형(객체, 배열 등 포함)일 수 있습니다.
마찬가지로 new 키워드와 마찬가지로 this 키워드도 항상 객체를 반환합니다. 보다 구체적으로 말하면 "현재" 속성이나 메서드가 있는 개체입니다.
var Keith = {
firstName: 'Chou',
describe: function() {
return this.firstName;
}
};
console.log(Keith.describe()); //'Chou'
위 코드에서 this.firstName은 현재 explain 메소드가 위치한 객체의 firstName 속성을 나타냅니다. 즉, 전역 범위에서 explain 메소드를 호출하면 현재 explain 메소드가 위치한 객체가 Keith이므로 Keith.firstName이 호출됩니다.
1.2: 이것이 가리키는 가변성
객체의 속성은 다른 객체에 할당될 수 있으므로, 속성이 위치한 현재 객체는 가변적이다. 즉, this의 포인터는 가변적입니다.
var Keith = {
firstName: 'Chou',
describe: function() {
return this.firstName;
}
};
var Rascal={
firstName: 'King'
}
Rascal.describe=Keith.describe;
console.log(Rascal.describe()); //'King'
위 코드에서 Keith 객체의 explain 속성은 Rascal에 할당되어 있으므로 현재 explain 메소드의 객체는 Rascal이므로 this.firstName은 Rascal을 가리킵니다. . 주소로 전달되기 때문에 firstName을 수정하면 원본 개체에 영향을 미칩니다. 이 예는 이해하기 쉽지 않을 수 있으므로 다음 예를 살펴보십시오.
function f(){
return this.firstName;
}
var Keith = {
firstName: 'Chou',
describe:f
};
var Rascal={
firstName: 'King',
describe:f
}
console.log(Keith.describe()); //'Chou'
console.log(Rascal.describe()); //'King'
위 코드에서는 메소드를 전역 범위로 이동하고 함수 f 내부에서 this 키워드를 사용합니다. f가 위치한 객체가 다르기 때문에 이는 다른 객체를 가리킵니다.
전역 범위에서 this 키워드는 최상위 개체(즉, 창 개체)를 가리킵니다.
var name='keith';
function person(){
var name='rascal';
return this.name;
}
console.log(person()); //'keith'
위 코드에서는 rascal 대신 keith가 반환됩니다. 그 이유는 이것이 전역 범위를 가리키기 때문입니다. 전역 범위에서 함수를 정의하면 기본적으로 함수 자체가 아니라 창 개체를 가리킵니다. 그러나 함수 내에서 지역 변수를 선언하기 위해 var를 사용하지 않으면 결과가 달라집니다.
var name='keith';
function person(){
name='rascal';
return this.name;
}
console.log(person()); //'rascal'
위 코드에서 함수 내부에 지역변수를 선언하기 위해 var를 사용하지 않았기 때문에 이때 함수 내부의 name 속성은 지역변수가 아니지만, 전역 변수. 따라서 이전 이름 속성을 덮어쓰게 됩니다. 지역 변수와 전역 변수에 대해 모르신다면 이 글을 참고하세요.
함수가 다른 변수에 할당되는 한 이 변수의 포인터는 변경됩니다.
var Keith={
name:'keith',
describe:function(){
return this.name;
}
}
var name='rascal';
var f=Keith.describe;
console.log(f()) //'rascal'
위 코드에서는 keith가 아닌 rascal이 반환됩니다. Keith.describe가 f 변수에 할당되고 전역 범위에 name 변수가 있으므로 Keith 내부 함수의 this 포인터는 f가 실행 중인 개체(최상위 개체, 즉 window 객체)
요약하자면:
1. JavaScript 언어에서는 모든 것이 객체이고(정의되지 않음 및 null 제외) 실행 환경도 객체이므로 함수는 특정 개체, 이것이 바로 이 개체(환경)입니다.
2.이것의 포인팅은 역동적입니다. 함수가 전역 범위에 있으면 전역 환경을 가리키고, 함수가 개체에 있으면 개체를 가리킵니다.
2. 사용 경우
이것의 사용 경우는 다음과 같이 나눌 수 있습니다.
2.1: 전역 환경(전역 범위)
창 개체인 최상위 개체를 가리키는 전역 범위에서 이 개체를 사용합니다.
function keith() {
return (this === window)
}
console.log(keith()) //true
위 코드에서 함수 내부에 있든 없든 전역 범위에서 실행되는 한 최상위 개체 창을 가리킵니다.
2.2: 생성자
생성자에서 이는 생성할 객체 인스턴스를 가리킵니다.
function Keith() {
this.sex = 'boy';
}
var person = new Keith();
console.log(person.sex); //'boy'
위 코드에서는 Keith 생성자를 전역 범위에 정의한 후 생성자를 호출하여 person 개체 인스턴스에 할당합니다.
생성자 생성에는 세 가지 기본 요구 사항이 있습니다. 함수 이름의 첫 글자는 대문자로 표시되며, 생성할 개체 인스턴스를 가리키는 생성자 내부에서는 new 키워드를 사용하여 호출합니다. 생성자를 반환하고 객체 인스턴스를 반환합니다.
생성자와 new 키워드의 관계에 대해 더 자세히 알고 싶으시면 이 글을 참고해주세요.
2.3: 객체 메소드
객체 A의 메소드가 객체 B에 할당되면 메소드의 이 메소드는 객체 A를 가리키는 방식에서 객체 B를 가리키는 방식으로 변경됩니다. 따라서 객체의 메소드를 다른 객체에 할당하면 해당 포인터가 변경되므로 특히 주의하세요.
var keith = {
sex: 'boy',
foo: function() {
return this.sex;
}
};
var rascal = {
sex: 'girl'
};
rascal.foo = keith.foo;
console.log(keith.foo()); //'boy'
console.log(rascal.foo()); //'girl'
위 코드에서 keith의 foo 함수가 rascal에 할당된 후 이 함수의 지점이 keith에서 rascal로 변경됩니다.
如果某个方法位于多层对象的内部，这时为了简化书写，把该方法赋值给一个变量，往往会得到不一样的结果。
var a = {
b: {
p: 'keith',
c: function() {
return this.p;
}
}
};
var person = a.b.c;
console.log(person()); //undefined
上面代码中，c是两层对象里面的一个方法。为求简便，将其赋值给全局变量person，结果调用时，this指向了顶层对象window。而在window中变量p默认值为undefined。
要解决这个问题，可以只将c所在的对象赋值给person变量，或者是直接调用。
var person = a.b; console.log(person.c()); //'keith' console.log(a.b.c()); //'keith'
3.使用注意点
3.1：避免多层嵌套this
当在闭包中使用多层this，则this都会指向window。
function keith() {
console.log(this);
return function() {
return this;
}
}
keith(); //window
keith()(); //window
上面代码中，在一个函数中返回另外一个匿名函数是闭包的特点之一，可以看出，当在闭包中使用this对象都会指向全局作用域中的window对象。
如果在函数外包含一个对象，则内部this指向全局作用域，而外部this对象指向当前作用域。
var o = {
f1: function() {
console.log(this);
(function() {
console.log(this)
})();
}
};
o.f1(); //Object , Window
上面代码包含两层this，结果运行后，第一层指向当前对象，第二层指向全局对象。
实际执行的是如下代码。
function keith() {
console.log(this);
}
var o = {
f1: function() {
console.log(this);
var f2 = keith();
}
};
o.f1(); //Object , Window
要实现多层this嵌套，有两种解决方法：
一是在第二层中改用一个指向外层this的变量。
var o = {
f1: function() {
console.log(this);
var that = this;
(function() {
console.log(that);
})();
}
};
o.f1(); //Object , Object
上面代码中，定义了局部变量that，固定指向了外层的this，然后在内层中使用that，就不会发生this指向的改变。但是如果函数外部内有嵌套一个对象，this还是会指向全局。
二是Javascript中的严格模式。在严格模式下，如果内部函数的this指向了window对象，就会报错。
var a = {
count: 0,
fun: function() {
'use strict';
return this.count++;
}
}
var f = a.fun;
console.log(f()) //'TypeError: this is undefined'
上面代码中，fun方法使用严格模式声明。把a对象中的fun方法赋值给全局变量f，那么this此时指向window对象，在严格模式下，就会报错。如果函数外部没有嵌套一个对象，那么不会报错，而是会返回undefined。
3.2：避免数组处理方法中的this
数组的map和foreach方法，允许提供一个函数作为参数。这个函数内部不应该使用this。
var keith = {
a: 'Hello',
b: ['b1', 'b2'],
c: function() {
this.b.forEach(function(item) {
console.log(this.a + ' ' + item);
})
}
};
keith.c();
//undefined b1
//undefined b2
上面代码中，forEach方法的回调函数中的this，其实指向的是window对象，因此取不到keith.a的值，同上也属于避免多层嵌套this。也就是说，内层的this不指向外部函数，而是指向顶层对象。
要解决这个方法，可以使用that变量来代替回调函数中的this。
var keith = {
a: 'Hello',
b: ['b1', 'b2'],
c: function() {
var that = this;
this.b.forEach(function(item) {
console.log(that.a + ' ' + item);
})
}
};
keith.c();
//Hello b1
//Hello b2
另外一种方法，就是让this做为forEach方法的第二个参数，来固定它的运行环境。
var keith = {
a: 'Hello',
b: ['b1', 'b2'],
c: function() {
this.b.forEach(function(item) {
console.log(this.a + ' ' + item);
}, this)
}
};
keith.c();
//Hello b1
//Hello b2
3.3：避免回调函数中的this
回调函数中的this往往会改变指向。
var o = {
f: function() {
console.log(this === o);
}
};
o.f(); // true;
上面代码中，调用o对象的f方法，返回true。
但是，如果将f方法指定给某个按钮的click事件，this的指向就变了。
$('button').on('click',o.f);
上面代码中，使用了jquery方法来获取button元素，并绑定click事件。点击按钮后控制台会显示false。原因是此时this不再指向o对象了，而是指向按钮的DOM对象，因为f方法是在按钮对象的环境中被调用的。
总结一下：
a：如果想要多层嵌套this关键字，最常用的解决方法就是使用that变量，固定指向外层的this，然后在内层中使用that变量。就不会发生内层this指向全局的问题。
b：如果在回调函数中使用this关键字，注意this的指向问题。