javascript关于this的用法

1、三句话总结this用法:

  1. 全局作用域:全局作用域中的 this 指向window。
  2. 函数作用域:方法中的 this 指向调用它的对象;如果没有调用者就指向window。
  3. 构造函数里:构造函数(或者ES6+的类)中的 this 指向新生成的实例对象。

2、全局作用域:全局中的this,指向window;

// 也是通过变量声明隐式声明的
// 因为全局上下文的变量对象是全局对象自身
var c = 30;
alert(this.c); // 30

var value = 200;
var fun2 = function(){
    // 输出 200
    console.log(this.value);
};

fun2();

3、函数作用域:方法中的 this 指向调用它的对象,如果没有调用者就指向window;

  • 方法有所属对象:this指向调用它的对象
var obj = {
    value: 100,
    get: function () {
        // 输出 100
        console.log(this.value);
        // 输出 { value: 100, get: [Function] },
        // 其实就是 obj 对象本身
        console.log(this);
        return this.value;
    }
};

console.log(obj.get()); // => 100
  • 方法没有所属对象:this指向window,这属于系统设计。可以使用变量替代的方法,该变量一般被命名为 self/that等替换this。
var obj = {
    value: 100,
    get: function () {
        var fun1 = function(){
            // 输出 undefined
            console.log(this.value);
            // 输出 window
            console.log(this);
        };
        fun1();
    }
};

obj.get();

4、构造函数里:构造函数(或者ES6+的类)中的 this 指向新生成的实例对象。

// es5 构造函数
function NewClass(){
    this.name = "newClass";
}

var obj = new NewClass();
console.log(obj.name);// 输出newClass
// es6+ 类定义
class Es6Class{
    constructor(){
        this.name = "es6Class";
    }
}

let obj = new Es6Class();
console.log(obj.name);// 输出es6Class

特别鸣谢:拉勾教育前端高薪训练营


41 声望
4 粉丝
0 条评论
推荐阅读
鸿蒙系统:如何使用前端技术/JS开发鸿蒙应用?
鸿蒙的特点1. 鸿蒙 => 超级小程序鸿蒙应用支持使用java开发,也支持使用js开发;使用js开发支持调用系统级的API,例如摄像头、话筒、WI-FI等。鸿蒙自己封装了hml、css、js的2. 鸿蒙 => 可剪裁系统(微内核...

拖泥羊2阅读 9.2k

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木140阅读 11.8k评论 10

JS禁止打开控制台
浏览宽高变化监测主要是监测浏览器可视区域的宽高:window.innerWidth / window.innerHeight(滚动条和内容区)和浏览器宽高:window.outerWidth / window.outerHeight(inner的基础上加上工具条的宽高)之间的差...

hfhan83阅读 15.3k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木60阅读 5.9k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.1k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木39阅读 7k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(>^ω^&lt...

XboxYan41阅读 2.8k评论 14

封面图
41 声望
4 粉丝
宣传栏