JS面向对象之三【this】 (对象和函数之间的关系)

JS面向对象之三【this】 (对象和函数之间的关系)

上一篇,谈了对象和对象的关系,如今咱们谈谈对象和函数的关系

先说结论,也就是观点1

观点1: JS里函数和对象没有关系,JS之父经过this将他们强行关联起来

首先咱们根据场景,去理解this的出现能够解决什么问题。

var obj = {
        name : 'ziwei',
        sayName: function(x){
            return console.log('hello,' + x.name)
        }
    }

如今咱们不用this,咱们就只能这样调方法
obj.sayName(obj)

可是通常而言,咱们用obj调用sayName,确定就是但愿让这个对象说本身的名字

为了可以obj.sayName(),让这个obj本身的传递进去,JS之父发明了this.

this的出现,就能够解决obj.sayName(obj)时,不用本身传递obj进去,而是直接obj,sayName(),让JS会帮你传递obj参数进去

你能够理解为JS作了一件事情,就是你每次调用函数时,都偷偷给你传递了一个参数,你用this就能够拿到这个参数。

var obj = {
        name : 'ziwei',
        sayName: function(){
            return console.log('hello,' + this.name)
        }
    }
    obj.sayName()

可是这样,其实对于新手很不友好。我obj.sayName(),根本没传递参数,那他是怎么输出obj的name的呢?

因此JS偷偷的传递this参数这件事情,咱们将它显式的展出来就好理解了。

实际上,JS就是作了这样一件事情,显式的指定this是obj. obj.sayName.call(obj)

回顾一下:

隐式模式: obj.sayName()
显示模式: obj.sayName.call(obj)

观点2: JS里全部函数都接受2个参数,第一个this,第二个是arguments

JS函数被调用时,必定会有这2个参数

若是你用call()调用函数,就是显式的传递this和arguments
若是你用()语法直接调用函数,那JS就去帮你偷偷的传递this。它怎么帮你传递呢? 这个问题暂时无论,下面会说。

JS其实为了用this,想了不少折中方案。
包括(1)函数调用有两种语法 , 把函数的参数划分为this和arguments

一个三段论

• 论点1: JS函数的参数的值,只有在传参时才肯定的
• 论点2: this是函数的参数
• 推论: this的值,只有在函数调用时才肯定

JS偷偷帮你传递参数的规则 (也就是你使用()语法调用时)

• 在全局做用域下调用函数,默认是window (这个是历史遗留bug),或者你也能够理解为window对象调用的函数
• 哪一个对象调用的,这个this就指向谁
• 构造函数里this指向构造函数的实例
• call、apply、bind都是显式的传递this了,不用多说
• 箭头函数里没有this,若是你非要写一个this,那这个this跟外面的this一致

作几个题目

这个this是谁?
function a(){
    console.log(this)
}

答案: 不肯定,this是参数,函数没有调用,怎么肯定参数的?

function a(){
    'use strict'
    console.log(this)
}

a()

答案: undefined, 严格模式下, 全局做用域下this再也不是window,而是undefiend

新手不会this的主要缘由,是不清楚函数的另外一个调用方式call(),

由于用call()就是本身传递this, 用()就是JS偷偷帮你传递this,既然是JS按照他本身的规则,偷偷给你传递的,你确定要懵逼搞不清的

就像手动档和自动挡开车同样