网站首页 » 前端开发 » JavaScript » JavaScript 中的 this 关键字
上一篇:
下一篇:

JavaScript 中的 this 关键字

前言

关于 JavaScript 中的 this 关键字相信你已经早已感受到它的存在了,或者对他也已经有一知半解了,但本文要分享的关于 this 的东西你确定全都知道吗?可能不一定!

this 之旅

this 总是指向一个对象,这一点已经家喻户晓了,包括你也不例外。但在不同的情况下它的指向也是不一样的,得具体情况具体分析。我们通过几个例子来感受感受 this 的博大精深。

场景一

直接打印
console.log(this);
// 打印出来的是 Window {frames: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …} 对象 

这时 this 就是指向了 JavaScript 中的全局对象 Window。

场景二

看过来
var person = function(){
    var sayHello = function(){
        console.log(this);
    };
    sayHello();
}
person();
// 打印出来的是 Window {frames: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}

这时 this 仍然指向了 JavaScript 中的全局对象 Window。

场景三

我们平时比较常见的写法,给一个对象添加属性和方法。

看这里
var person = {
    name : "云库前端",
    sayHello:function(){
        console.log(this);
    }
}
// person.sayHello(); // 打印出来的是 person 这个对象

场景四

我真的不信
var person = {
    name : "云库前端",
    sayHello:function(){
        console.log(this);
    }
}
var say = person.sayHello;
say();
//  打印出来的是 Window {frames: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …} 对象

这时 this 竟然指向了 JavaScript 中的全局对象 Window。

场景五

我真的不信邪
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript 中关于 this 的指向问题</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    </head>
    <body>
<button id="wrap">我只是来打酱油的</button>
<script>
var oDiv = document.getElementById("wrap");
oDiv.onclick = function(){
    console.log(this,"我是第一个this");
    var surprise = function(){
        console.log(this,"我是第二个this");
    };
    surprise();
}
// <button id="wrap">我只是来打酱油的</button> "我是第一个this"
// Window {frames: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …} "我是第二个this"
</script>
</body>
</html>

我就问你服不服。

场景六

这种就比较简单了,只要记住就行,基本不耗脑力。

看一眼就够
var Person = function(){
    this.name = "云库网";
};
var peter = new Person();
console.log(peter.name);
// 云库网

场景七

但是有时候意外总是发生在不经意间,比如下面这个例子

想都想不到
var Person = function(){
    this.name = "云库网";
    return {
        name:"http://yunkus.com"
    }
};
var peter = new Person();
console.log(peter);
// 打印出来的是 {name: "http://yunkus.com"}

当构造器里显式地返回一个object 类型的对象时,这个this 指向的不再是之前的,而是 return 回来的这个对象。如果teturn 的不是一个object 类型的对象,那么就不会有影响,比如return 一个字符串,或者一个数字等等。

关于 this 的应用,我们不得不联想到两个方法: Function.prototype.apply() 和Function.prototype.call() 方法。因为这两个方法就是用来改变 this 的指向的。具体用法可以看这里《JavaScript call() 方法 和 apply() 方法详解》。其实 Function.prototype.apply() 和 Function.prototype.call() 方法作用是一样的,只是在用法上就会有点不同,不同点就在于它们接收的参数数量不一样。Function.prototype.apply() 接收两个参数。第一个参数指定了函数体内 this 的指向,第二个参数是一个带下标的集合(类数组),参 Function.prototype.call() 方法可以接收 多个参数。

了解了 JavaScript 中的 this 关键字的指向问题,在平时的 JavaScript 开发中你就可以更加轻松的玩弄代码了。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/javascript-this-keyword/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END