이번에는 호출 및 적용 시 이 포인터를 사용하는 방법에 대한 Notes와 호출 및 적용 시 이 포인터를 사용할 때의
Notes를 함께 살펴보겠습니다.
1. 함수가 일반 함수로 호출되면 전역 개체를 가리킵니다.
2. 함수가 개체의 메서드로 호출되면 개체를 가리킵니다.
3. 생성자로서 이는 새로 생성된 객체
예제 1:window.name = 'myname';
function getName() {
console.log(this.name);
}
getName(); //输出myname
var boy = {
name: 'Bob',
getName: function() {
console.log(this.name);
}
}
boy.getName(); //输出Bob
function Boy(name) {
this.name = name;
}
var boy1 = new Boy('Bob');
console.log(boy1.name); //输出Bob
예제 3에는 또 다른 특별한 경우가 있습니다. 즉,
가 "return"을 통해 반환할 때 객체를 사용할 때 이 연산의 최종 결과는 새로 생성된 객체가 아닌 이 객체를 반환하므로 이 경우에는 쓸모가 없습니다.
예 4:function Boy(name) {
this.name = name;
return { //返回一个对象
name: 'Jack'
}
}
var boy1 = new Boy('Bob');
console.log(boy1.name); //输出Jack
function Boy(name) {
this.name = name;
return 1; //返回非对象
}
var boy1 = new Boy('Bob');
console.log(boy1.name); //输出Bob
호출 및 적용의 역할
apply는 함수 본문에서 this의 포인터를 두 개 허용합니다. 두 번째 매개변수 매개변수는 호출된
함수의 매개변수 목록을 전달하는 데 사용되는 배열 또는 유사 배열입니다.
예제 1:function getInfo() { console.log(this.name+' like '+arguments[0]+' and '+arguments[1]); } var boy1 = { name: 'Bob', age: 12 } getInfo.apply(boy1,['sing','swimming']); //输出Bob like sing and swimming
call 전달되는 매개변수의 개수는 고정되어 있지 않습니다. apply와 마찬가지로 첫 번째 매개변수도 함수 본문에서 this의 포인터를 지정하는 데 사용됩니다. 매개변수는 호출된 함수에 차례로 전달됩니다.
예 2:function getInfo() { console.log(this.name+' like '+arguments[0]+' and '+arguments[1]); } var boy1 = { name: 'Bob', age: 12 } getInfo.call(boy1,'sing','shopping'); //输出Bob like sing and shopping
게다가 대부분의 고급 브라우저는 바인딩 메서드도 구현합니다. 호출과 적용의 차이점은 바인딩이 함수 내에서 이 포인터만 변경하지만 즉시 실행되지는 않는다는 것입니다. . 명시적으로 호출해야 합니다.
예제 3: 브라우저의 바인딩 방법 시뮬레이션Function.prototype.bind = function(obj){
var self = this;
return function(){
return self.apply(obj,arguments);
}
};
var obj = {
name: 'Bob',
age: 12
};
var func = function(){
console.log(this.name+' like '+arguments[0]+' and '+arguments[1]);
}.bind(obj);
func('sing','shopping');
Lost this
어떤 경우에는 this에 대한 포인터가 손실될 수 있습니다. 이때 변경하려면 호출, 적용 및 바인딩을 사용해야 합니다. it 이것의 포인팅 문제입니다. 예제 1: "boy" 객체의 속성으로 "getName" 메소드가 호출되면 이는 "boy" 객체를 가리킵니다. 다른 변수가 "getName" 메소드를 참조
하면 이 메소드는 일반 함수, 이 전역 개체 창을 가리킵니다var boy = { name: 'Bob', getName: function() { console.log(this.name); } } boy.getName(); //输出Bob var getBoyName = boy.getName; getBoyName(); //输出undefined예 2: 함수 내부에 함수가 정의되어 있어도 일반 개체로 호출하면 이것도 창 개체를 가리킵니다
var boy1 = { name: 'Bob', age: 12, getInfo: function() { console.log(this.name); function getAge() { console.log(this.age); } getAge(); } } boy1.getInfo(); //Bob //undefined마스터하신 것 같아요 이 기사의 사례를 읽은 후 더 흥미로운 내용을 보려면 중국 웹 사이트의 PHP에 주목하십시오! 추천 자료:
jquery 전체 페이지 플러그인으로 헤더 및 테일 저작권 관련 추가
webpack 패키지 및 압축 js 및 css 단계 자세한 설명
위 내용은 통화시 사용 및 적용시 주의할 점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!