고급 프론트 엔드 기본 사항(5): 이에 대한 포괄적인 해석

JavaScript를 학습하는 과정에서 우리가 어떤 개념을 아주 명확하게 이해하지는 못하지만, 어떤 식으로든 적어보고 싶어서 성급하게 개념을 작성하기 쉽습니다. 자신의 기억에 편리한 편향된 결론.

더 해로운 것은 일부 부정확한 결론이 인터넷에 널리 유포된다는 점입니다.

예를 들어 이것이 무엇을 가리키는지 이해하는 데에는 누가 부르든 이것이 가리키는 말이 있습니다. 처음 이 말씀을 배우기 시작했을 때 저는 이 말씀을 무척 믿었습니다. 어떤 경우에는 이러한 이해가 의미가 있기 때문입니다. 하지만 개발 과정에서 몇 가지 다른 상황에 자주 직면하게 됩니다. 이로 인해 잘못된 호출이 하루 종일 혼란스러울 수 있습니다. 그때도 정보를 찾아보고 그룹 내 전문가에게 물어봤지만 여전히 '내가 어디서 잘못됐나?'를 알 수 없었다. 사실 그것은 단지 내 마음 속에 잘못된 결론이 있기 때문일 뿐입니다.

바이두 검색에 대한 불만이 있습니다. 발견된 기사 중 다수가 잘못된 내용으로 인해 오랫동안 노사에 피해를 입혔습니다

그래서 그런 것 같습니다. 이 기사를 전반적으로 이해하는 데 도움이 되는 기사가 필요합니다. 모든 사람이 이에 대해 정확하고 포괄적으로 이해하도록 하십시오.

그 전에 실행 컨텍스트를 검토해야 합니다.

이전 기사에서 여러 곳에서 실행 컨텍스트의 라이프사이클을 언급했습니다. 기억나지 않을 경우를 대비해 아래와 같이 다시 복습해 보겠습니다.

실행 컨텍스트의 생성 단계에서는 각각 변수 객체가 생성되고 범위 체인이 설정되며 이 시점이 결정됩니다. 변수 객체와 스코프 체인에 대해 꼼꼼히 정리해 보았는데, 여기서 핵심은 이것의 요점을 파악하는 것입니다.

여기서 명심해야 할 매우 중요한 결론을 도출해야 합니다. 이 점은 함수가 호출될 때 결정됩니다. 즉, 실행 컨텍스트가 생성될 때 결정됩니다. 따라서 함수의 this 포인터가 매우 유연할 수 있다는 것을 쉽게 이해할 수 있습니다. 예를 들어, 다음 예제에서는 호출 방법이 다르기 때문에 동일한 함수가 다른 객체를 가리킵니다.

var a = 10;
var obj = {
    a: 20
}

function fn () {
    console.log(this.a);
}

fn(); // 10
fn.call(obj); // 20

또한, 함수 실행 중에는 한번 결정되면 변경할 수 없습니다.

var a = 10;
var obj = {
    a: 20
}

function fn () {
    this = obj; // 这句话试图修改this，运行后会报错
    console.log(this.a);
}

fn();

---

1. 전역 객체의 this

전역객체에 대해서는 앞서 변수객체를 요약할 때 언급한 적이 있는데, 비교적 특수한 존재입니다. 이는 글로벌 환경에서 그 자체를 가리킵니다. 따라서 상대적으로 간단하고 고려해야 할 합병증이 많지 않습니다.

// 通过this绑定到全局对象
this.a2 = 20;

// 通过声明绑定到变量对象，但在全局环境中，变量对象就是它自身
var a1 = 10;

// 仅仅只有赋值操作，标识符会隐式绑定到全局对象
a3 = 30;

// 输出结果会全部符合预期
console.log(a1);
console.log(a2);
console.log(a3);

---

2. 이

함수에 함수에서 this 점을 요약하면, 함수에서 this의 파악하기 어려운 점을 느끼려면 몇 가지 이상한 예를 사용해야 할 것 같습니다.

// demo01
var a = 20;
function fn() {
    console.log(this.a);
}
fn();

// demo02
var a = 20;
function fn() {
    function foo() {
        console.log(this.a);
    }
    foo();
}
fn();

// demo03
var a = 20;
var obj = {
    a: 10,
    c: this.a + 20,
    fn: function () {
        return this.a;
    }
}

console.log(obj.c);
console.log(obj.fn());

독자들은 시간을 내어 이러한 예를 경험해 보아야 합니다. 무슨 일이 일어나고 있는지 이해하지 못하더라도 걱정하지 마십시오.

분석에 앞서 결론을 직접 도출해보자.

함수 컨텍스트에서 이는 호출자가 제공하며 함수가 호출되는 방식에 따라 결정됩니다. 호출자 함수가 객체의 소유인 경우 함수가 호출되면 내부 this가 객체를 가리킵니다. 함수가 독립적으로 호출되면 함수 내부의 this는 정의되지 않음을 가리킵니다. 그러나 엄격하지 않은 모드에서는 이것이 정의되지 않음을 가리키면 자동으로 전역 개체를 가리킵니다.

결론적으로 보면 이 내용을 정확하게 판단하기 위해서는 함수의 호출자를 찾아내고, 그가 독립적으로 호출하고 있는지 구별하는 것이 매우 중요하다는 것을 알 수 있다.

// 为了能够准确判断，我们在函数内部使用严格模式，因为非严格模式会自动指向全局
function fn() {
    'use strict';
    console.log(this);
}

fn();  // fn是调用者，独立调用
window.fn();  // fn是调用者，被window所拥有

위의 간단한 예에서 fn()은 정의에 따라 내부 this 포인터가 정의되지 않은 독립적인 호출자입니다. window.fn()에서 fn은 window가 소유하므로 내부 this는 window 객체를 가리킵니다.

이제 이 규칙을 마스터했으므로 이제 위의 세 가지 예를 살펴보세요. 엄격 모드를 추가/제거하면 이 규칙이 덜 환상적이고 추적되었음을 알 수 있습니다.

그런데 우리가 특별히 주목해야 할 것은 데모03입니다. 데모03에서 객체 obj의 c 속성은 this.a + 20을 사용하여 계산되며 해당 호출자 obj.c는 함수가 아닙니다. 따라서 위의 규칙에는 적용되지 않으며, 이 방법에 대해서는 별도의 결론을 도출해야 한다.

obj가 전역적으로 선언되면 obj.c가 호출되는 위치에 관계없이 여기서 this는 전역 객체를 가리키고, obj가 함수 환경에서 선언되면 this는 정의되지 않음(non-strict 모드)을 가리킵니다. , 자동으로 전역 객체로 전환됩니다. 아래 예제를 실행하여 차이점을 확인할 수 있습니다.

'use strict';
var a = 20;
function foo () {
    var a = 1;
    var obj = {
        a: 10, 
        c: this.a + 20,
        fn: function () {
            return this.a;
        }
    }
    return obj.c;

}
console.log(foo()); // 运行会报错

실제 개발에서는 이런 방식으로 사용하지 않는 것이 좋습니다.

上面多次提到的严格模式，需要大家认真对待，因为在实际开发中，现在基本已经全部采用严格模式了，而最新的ES6，也是默认支持严格模式。

再来看一些容易理解错误的例子，加深一下对调用者与是否独立运行的理解。

var a = 20;
var foo = {
    a: 10,
    getA: function () {
        return this.a;
    }
}
console.log(foo.getA()); // 10

var test = foo.getA;
console.log(test());  // 20

foo.getA()中，getA是调用者，他不是独立调用，被对象foo所拥有，因此它的this指向了foo。而test()作为调用者，尽管他与foo.getA的引用相同，但是它是独立调用的，因此this指向undefined，在非严格模式，自动转向全局window。

稍微修改一下代码，大家自行理解。

var a = 20;
function getA() {
    return this.a;
}
var foo = {
    a: 10,
    getA: getA
}
console.log(foo.getA());  // 10

灵机一动，再来一个。如下例子。

function foo() {
    console.log(this.a)
}

function active(fn) {
    fn(); // 真实调用者，为独立调用
}

var a = 20;
var obj = {
    a: 10,
    getA: foo
}

active(obj.getA);

---

三、使用call，apply显示指定this

JavaScript内部提供了一种机制，让我们可以自行手动设置this的指向。它们就是call与apply。所有的函数都具有着两个方法。它们除了参数略有不同，其功能完全一样。它们的第一个参数都为this将要指向的对象。

如下例子所示。fn并非属于对象obj的方法，但是通过call，我们将fn内部的this绑定为obj，因此就可以使用this.a访问obj的a属性了。这就是call/apply的用法。

function fn() {
    console.log(this.a);
}
var obj = {
    a: 20
}

fn.call(obj);

而call与applay后面的参数，都是向将要执行的函数传递参数。其中call以一个一个的形式传递，apply以数组的形式传递。这是他们唯一的不同。

function fn(num1, num2) {
    console.log(this.a + num1 + num2);
}
var obj = {
    a: 20
}

fn.call(obj, 100, 10); // 130
fn.apply(obj, [20, 10]); // 50

因为call/apply的存在，这让JavaScript变得十分灵活。因此就让call/apply拥有了很多有用处的场景。简单总结几点，也欢迎大家补充。

1.将类数组对象转换为数组

function exam(a, b, c, d, e) {

    // 先看看函数的自带属性 arguments 什么是样子的
    console.log(arguments);

    // 使用call/apply将arguments转换为数组, 返回结果为数组，arguments自身不会改变
    var arg = [].slice.call(arguments);

    console.log(arg);
}

exam(2, 8, 9, 10, 3);

// result: 
// { '0': 2, '1': 8, '2': 9, '3': 10, '4': 3 }
// [ 2, 8, 9, 10, 3 ]
// 
// 也常常使用该方法将DOM中的nodelist转换为数组
// [].slice.call( document.getElementsByTagName('li') );

2.根据自己的需要灵活修改this指向

var foo = {
    name: 'joker',
    showName: function() {
      console.log(this.name);
    }
}
var bar = {
    name: 'rose'
}
foo.showName.call(bar);

3.实现继承

// 定义父级的构造函数
var Person = function(name, age) {
    this.name = name;
    this.age  = age;
    this.gender = ['man', 'woman'];
}

// 定义子类的构造函数
var Student = function(name, age, high) {

    // use call
    Person.call(this, name, age);
    this.high = high;
}
Student.prototype.message = function() {
    console.log('name:'+this.name+', age:'+this.age+', high:'+this.high+', gender:'+this.gender[0]+';');
}

new Student('xiaom', 12, '150cm').message();

// result
// ----------
// name:xiaom, age:12, high:150cm, gender:man;

简单给有面向对象基础的朋友解释一下。在Student的构造函数中，借助call方法，将父级的构造函数执行了一次，相当于将Person中的代码，在Sudent中复制了一份，其中的this指向为从Student中new出来的实例对象。call方法保证了this的指向正确，因此就相当于实现了基层。Student的构造函数等同于下。

var Student = function(name, age, high) {
    this.name = name;
    this.age  = age;
    this.gender = ['man', 'woman'];
    // Person.call(this, name, age); 这一句话，相当于上面三句话，因此实现了继承
    this.high = high;
}

4.在向其他执行上下文的传递中，确保this的指向保持不变

如下面的例子中，我们期待的是getA被obj调用时，this指向obj，但是由于匿名函数的存在导致了this指向的丢失，在这个匿名函数中this指向了全局，因此我们需要想一些办法找回正确的this指向。

var obj = {
    a: 20,
    getA: function() {
        setTimeout(function() {
            console.log(this.a)
        }, 1000)
    }
}

obj.getA();

常规的解决办法很简单，就是使用一个变量，将this的引用保存起来。我们常常会用到这方法，但是我们也要借助上面讲到过的知识，来判断this是否在传递中被修改了，如果没有被修改，就没有必要这样使用了。

var obj = {
    a: 20,
    getA: function() {
        var self = this;
        setTimeout(function() {
            console.log(self.a)
        }, 1000)
    }
}

另外就是借助闭包与apply方法，封装一个bind方法。

function bind(fn, obj) {
    return function() {
        return fn.apply(obj, arguments);
    }
}

var obj = {
    a: 20,
    getA: function() {
        setTimeout(bind(function() {
            console.log(this.a)
        }, this), 1000)
    }
}

obj.getA();

当然，也可以使用ES5中已经自带的bind方法。它与我上面封装的bind方法是一样的效果。

var obj = {
    a: 20,
    getA: function() {
        setTimeout(function() {
            console.log(this.a)
        }.bind(this), 1000)
    }
}

---

四、构造函数与原型方法上的this

在封装对象的时候，我们几乎都会用到this，但是，只有少数人搞明白了在这个过程中的this指向，就算我们理解了原型，也不一定理解了this。所以这一部分，我认为将会为这篇文章最重要最核心的部分。理解了这里，将会对你学习JS面向对象产生巨大的帮助。

结合下面的例子，我在例子抛出几个问题大家思考一下。

function Person(name, age) {

    // 这里的this指向了谁?
    this.name = name;
    this.age = age;   
}

Person.prototype.getName = function() {

    // 这里的this又指向了谁？
    return this.name;
}

// 上面的2个this，是同一个吗，他们是否指向了原型对象？

var p1 = new Person('Nick', 20);
p1.getName();

我们已经知道，this，是在函数调用过程中确定，因此，搞明白new的过程中到底发生了什么就变得十分重要。

通过new操作符调用构造函数，会经历以下4个阶段。

1.创建一个新的对象；

2.将构造函数的this指向这个新对象；

3.指向构造函数的代码，为这个对象添加属性，方法等；

4.返回新对象。

因此，当new操作符调用构造函数时，this其实指向的是这个新创建的对象，最后又将新的对方返回出来，被实例对象p1接收。因此，我们可以说，这个时候，构造函数的this，指向了新的实例对象，p1。

而原型方法上的this就好理解多了，根据上边对函数中this的定义，p1.getName()中的getName为调用者，他被p1所拥有，因此getName中的this，也是指向了p1。

好啦，我所知道的，关于this的一切，已经总结完了，希望大家在阅读之后，能够真正学到东西，然后给我点个赞^_^。如果你发现有什么错误，请在评论中指出，我会尽快修改。先谢过了。