前端面试之JavaScript中this的指向【待完善!】

JavaScript中this的指向问题!

另一个特殊的对象是 this,它在标准函数和箭头函数中有不同的行为。

在标准函数中, this 引用的是把函数当成方法调用的上下文对象,这时候通常称其为 this 值(在网页的全局上下文中调用函数时, this 指向 windows)。来看下面的例子:

window.color = 'red';

        let person = {
            name: 'lvhang',
            age: 23,
            color: 'pink'
        }

        function sayColor() {
            console.log(this.color);
        }

        function sayColor2() {
            console.log(this.color === window.color);
        }

        sayColor(); // red
        sayColor2(); // true

        person.sayColor = sayColor;
        person.sayColor(); // pink

定义在全局上下文中的函数 sayColor()引用了 this 对象。这个 this 到底引用哪个对象必须到函数被调用时才能确定。因此这个值在代码执行的过程中可能会变。如果在全局上下文中调用sayColor(),这结果会输出"red",因为 this 指向 window,而 this.color 相当于 window.color。而在把 sayColor()赋值给 person 之后再调用 person.sayColor(), this 会指向 person,即 this.color 相当于
person.color,所以会显示"blue"。

在构造函数中this 指向的是我们的对象实例

function Singer(name, gender) {
            this.name = name;
            this.age = age;
        }
   var xiaoshi = new Singer('小时姑娘!');
        // 1 在构造函数中, 里面的this指向的是对象实例 xiaoshi

2 原型对象里面的this指向的是谁呢?!

// 只有你调用的时候才能确定指向的是谁!
var that;
        Singer.prototype.sing = function() {
            console.log('我唱歌很好听, 你听听看!');
            that = this;
        }
   var xiaoshi = new Singer('小时姑娘!');

// 一般情况下this指向的是我们的调用者!
// 也就是我们的对象实例!xiaoshi

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lvhanghmm

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值