【Day28】this - call, apply, bind 与严谨模式

call, apply, bind 方法

当我们对函式使用 call, apply, bind 这三种方法时，能改变 this 的值

简易呼叫

先来看一般的函式呼叫

var family = {
    myName: 'weiwei',
};

function fn(para1, para2){
    console.log(this, para1, para2);
};

fn(1, 2);

此时函式内的 this 是指向全域，这在昨天的文章有解释

call()

使用 call() 时，在 () 中第一个要代入 this 的值，随後才将参数代入

var family = {
    myName: 'weiwei',
};

function fn(para1, para2){
    console.log(this, para1, para2);
};

fn.call(family, 1, 2);

在范例中，我们将 this 指向 family 这个物件，

而 1 、 2 是做为参数代入函式中，

因此函式中的 this 会回传 family，

而 para1 、 para2 则分别回传 1 、 2，

apply()

apply() 中第一个参数也是带入 this 的值，随後使用 [] 将函式的参数代入

var family = {
    myName: 'weiwei',
};

function fn(para1, para2){
    console.log(this, para1, para2);
};

fn.apply(family, [3, 4]);

该范例 this 是指向 family 这个物件，

而函式的参数 para1 、 para2 的值为 [] 中的 3 、 4，

使用上跟 call() 差不多

bind()

我们使用 bind() 时，我们会将它赋予到变数中，

而 () 内第一个参数也是代入 this 的值，随後代入函式的参数

var family = {
    myName: 'weiwei',
};

function fn(para1, para2){
    console.log(this, para1, para2);
};

var fn2 = fn.bind(family, 5, 6);

fn2();

在昨天的文章中有提到，当我们使用 Simple Call 时，this 会指向全域，

而范例中 fn2() 是因为在 bind() 中，就已经将 this 指向 family 物件，

因此在执行 fn2() 时，this 会指向 family，

而此时我们也能将参数放到 fn2() 中

var family = {
    myName: 'weiwei',
};

function fn(para1, para2){
    console.log(this, para1, para2);
};

var fn2 = fn.bind(family);

fn2(7, 8);

进阶观念

一般来说 this 会以物件形式呈现，

而在非严谨模式下的函式中，

当我们在 call() 的第一个参数代入原始型别时，

则会将原始型别的值进行封装，封装後的型别为 object，

但如果带入 null 、 undefined 时，

则 this 会指向全域，这在 MDN 文件中有说明

function fn(para1, para2){
    console.log(this, typeof this, para1, para2);
};

fn.call(1, 1, 2);
fn.call('weiwei', 1, 2);
fn.call(undefined, 1, 2);

严谨模式

以下列出严谨模式的特点

我们直接看范例

(function(){
    'use strict'
    a = 10;
})();

此执会看见 a is not defined，

在严谨模式下会要求你先宣告变数，才能做赋予值的动作

当我们拿掉 'use strict' 时，则不会出错

(function(){
    a = 10;
})();

接着我们在函式中加入 'use strict'，使用 call() 看结果如何

function fn(para1, para2){
    'use strict';
    console.log(this, typeof this, para1, para2);
};

fn.call(1, 1, 2);

此时能看见在严谨模式下，如果 this 代入原始型别，其值不会被改为建构式，

那如果我们代入 undefined 会如何呢？

function fn(para1, para2){
    'use strict';
    console.log(this, typeof this, para1, para2);
};

fn.call(undefined, 7, 8);

此时 this 的值会是 undefined，而在非严谨模式下会指向全域，

接着我们使用简易呼叫来看 this 的值会如何

function fn(para1, para2){
    'use strict';
    console.log(this, typeof this, para1, para2);
};

fn(9, 'weiwei');

在非严谨模式中函式的 this 是指向全域，

但此时能看见在严谨模式下函式的 this 为 undefined

而我们使用简易呼叫时，概念跟使用 call() 很像，

只差别在简易呼叫不会传入 this 的值，此时的 this 就会是 undefined，

因此我们我可以知道 this 的本质是 undefined，

所以一般不太建议使用简易呼叫中的 this，

关於更多严谨模式的说明可到MDN 文件查看

以上是今天 call, apply, bind 与严谨模式的内容，感谢观看！！