JavaScript 中的 this

前言:this指向的是一个对象,具体指向的是哪个对象由函数调用方式来决定。

为什么要使用this?

答案:在调用函数的时候可以少传一个参数,是代码更灵活,复用性更好

    var obj01 = {name : "小白"};
    var obj02 = {name : "小黑"};

    function showName(){
        console.log(this.name);
    }

    obj01.showName = showName;
    obj02.showName = showName;

    obj01.showName();
    obj02.showName();

this到底指向谁呢?具体由函数的调用方式来决定

  • 001 以普通函数的方式来调用,在非严格模式下,指向window,在严格模式下,指向undefined
  • 002 以对象的方法来调用,this指向调用方法的对象
  • 003 以构造函数的方式来调用,this指向的是构造函数内部新创建的对象
  • 004 以上下文的方式来调用(call | apply),this指向第一个参数
demo1 以普通函数的方式来调用,在非严格模式下,指向window,在严格模式下,指向undefined
<script>
    "use strict";

    function foo(){
        console.log(this);
    }
    foo();
</script>
demo2 以对象的方法来调用,this指向调用方法的对象
<script>
    var obj = {
        name : "小白",
        showName : function(){
            console.log(this);
            console.log(this.name);
        }
    }

    obj.showName();
</script>
demo3 以构造函数的方式来调用,this指向的是构造函数内部新创建的对象
<script>
    function Foo(){
        this.name = "默认";
        this.age = 18;
        this.showName = function(){
            console.log(this);
            console.log(this.name + ' -' + this.age);
        }
    }

    var foo = new Foo();
    foo.showName();
</script>
demo4 以上下文的方式来调用(call | apply),this指向第一个参数
<script>
    var obj1 = {
        name : "默认",
        sayHi : function(){
            console.log(this.name + '在 say Hi~');
        }
    };

    var obj2 = {
        name : "小白"
    }

    obj1.sayHi.call(obj2); //小白在 say Hi~
</script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 导语 不得不说,作为一名初级的前端开发者,this关键字这个问题对于我来说一直是一个痛点,什么是this?什么是函...
    Nicole_tiny阅读 559评论 0 4
  • 前言 总括:详解JavaScript中的this的一篇总结,不懂this这个难点,很多时候会造成一些困扰,写出一些...
    秦至阅读 588评论 0 4
  • 本来不想写this的东西,因为实在是头晕啊,讲不清楚,JavaScript中的this真是让人抓狂,好在我们调试的...
    转角遇见一直熊阅读 1,906评论 11 39
  • 作者:yuanzm原文地址:http://segmentfault.com/a/1190000002640298 ...
    IT程序狮阅读 837评论 0 22
  • 《论春节》 看了《成为国际性节日春节还要走多少路》这篇文章后,我突然想起两年前,我和儿子有过一次激烈的争论。儿子的...
    弟哥阅读 280评论 2 1