【转】js中this用法

码途绘雪使
• 阅读 3709

javascript中的this

译:理解并掌握 JavaScript 中 this 的用法

关键

只有一个对象调用了包含this函数时,this才被赋值,并且所赋的值只依赖于调用了包含this函数的对象

使用原则

  1. this永远指向一个对象,并且拥有着个对象的值

  2. 在严格模式下,在全局作用域中和匿名函数中,this指向undefined

  3. this在一个函数内出现的时候,this指向调用这个函数的对象

易错场景

  1. 包含this的方法被当作回调函数

        $("button").click(callback);
    

    期待this指向:包含该方法的对象

    实际this指向:调用了回调函数的对象

    解决办法:bind

  2. this出现在闭包内

       
           ...
        example: function(){
            [1,2,3,4].forEach(function(item){
               this.test(item)
           })
       }
           ...
    

    期待this指向:外层函数的this指向

    实际this指向:undefined或者全局对象

    解决办法:使用另外一个变量保存this

  3. 把包含this的方法赋给一个变量

       var user = {
           name: 'hhh',
           sayName: function(){
               console.log(this.name);
           }
       }
       var test = user.sayName;
       test();//  全局变量的this
    

    期待this指向:包含该方法的对象

    实际this指向:包含该变量的对象

    解决办法:bind

  4. 借用包含this的方法

    var user1 = {
        name: 'hhh',
        sayName: function(){
            console.log(this.name);
        }
    }    
    var user2 = {
        name: 'ggg'
    }
    user2.ggg = user1.sayName();//

期待`this`指向:借用`this`方法的对象

实际`this`指向:包含该`this`方法的对象

解决办法:`apply`

this的使用是一个经常容易出错的地方,但是只要把握一个原则,即

this总是指向调用包含this的方法的对象

点赞
收藏
评论区
推荐文章
待兔 待兔
1年前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Souleigh ✨ Souleigh ✨
4年前
理解 Javascript 中的 Async / Await
在本文中,我们将探讨async/await,对于每个Javascript开发人员来说,是异步编程的首选工具。如果您不熟悉javascript,请不要担心,本文将帮助您async/await从头开始理解。介绍async/await是javascript中的一种模式,可使您的代码以同步方式执行,但又不影响javascript的异步行为。定义异步功能要定义一
晴空闲云 晴空闲云
4年前
javascript实践教程-02-javascript入门
本节目标1.掌握如何编写javascript代码。2.掌握javascript的3个弹框。3.掌握javascript的注释。4.掌握浏览器的调试工具控制台。内容摘要本篇介绍了如何在网页上编写js代码,如何引入外部js代码文件,js的3个弹框、注释语法,还有浏览器调试工具的控制台使用。阅读时间1520分钟。script标签如果我们需要在网页中编写
Dax Dax
4年前
JavaScript中call()、apply()、bind()的用法
call()apply()bind()都是用来更改this的指向的其中bind()返回的是一个函数,必须执行才行传参差异:call、bind、apply这三个函数的第一个参数都是this的指向对象,第二个参数差别就来了:call的参数是直接放进去的,第二第三第n个参数全都用逗号分隔,直接放到后面obj.myFun.call(db,'
Karen110 Karen110
4年前
一篇文章带你了解JavaScript作用域
在JavaScript中,对象和函数也是变量。在JavaScript中,作用域是你可以访问的变量、对象和函数的集合。JavaScript有函数作用域:这个作用域在函数内变化。一、本地JavaScript变量一个变量声明在JavaScript函数内部,成为函数的局部变量。局部变量有局部作用域:它们只能在函数中访问。JS://codeherecann
Python进阶者 Python进阶者
4年前
一文带你解读​JavaScript的基本用法
前言相信做网站对JavaScript再熟悉不过了,它是一门脚本语言,不同于Python的是,它是一门浏览器脚本语言,而Python则是服务器脚本语言,我们不光要会Python,还要会JavaScript,因为它对做网页方面是有很大作用的。JavaScript的基本用法1.如何使用Js脚本1).引入Js文件在头部标签中导入脚本标签并指明脚本文件路径2).
Stella981 Stella981
4年前
Html5添加三联切换仿3D效果旋转木马jQuery插件教程
一、使用方法<script type"text/javascript" src"js/jquery.min.js"</script<script type"text/javascript" src"js/gallery.js"</script   二、Html结构<div id"wrapper"<div id"mai
Stella981 Stella981
4年前
JavaScript的 基本数据类型
第一:Javascript对象是第二:Javascript中第三:Javascript的对象是数据;第四:JavaScript中的对象可以简单理解成"名称:值"对(name:value)。名称(name):"名称"部分是一个JavaScript字符串参考https://www
Stella981 Stella981
4年前
JavaScript Prototype
定义和用法prototype属性使您有能力向对象添加属性和方法。实例在本例中,将展示如何使用prototype属性来向对象添加属性:<scripttype"text/javascript"functionemployee(name,job,born){this.n
Wesley13 Wesley13
4年前
JS 面相对象编程
提起面向对象我们就能想到类,对象,封装,继承,多态。在《javaScript高级程序设计》(人民邮电出版社,曹力、张欣译。英文名字是:ProfessionalJavaScriptforWebDevelopers)这本书中描述的还算比较详细。我们看看JavaScript中定义类的各种方法。1.工厂方式javaScript中创建自己的类和对象,我们应
Stella981 Stella981
4年前
Javascript中,实现类与继承的方法和优缺点分析
Javascript是一种弱类型语言,不存在类的概念,但在js中可以模仿类似于JAVA中的类,实现类与继承第一种方法:利用Javascript中的原型链1//首先定义一个父类23functionAnimal(name,age){4//定义父类的属性5thi