博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript中this详解
阅读量:6709 次
发布时间:2019-06-25

本文共 1500 字,大约阅读时间需要 5 分钟。

hot3.png

JavaScript原则:

    JavaScript中的this永远指向其函数的拥有者

    或者

    this指针代表的是执行当前代码的对象的所有者

   

  1. 全局代码中的this

    alert(this)// window

    全局范围内的this将指向全局对象,在浏览器中即为window

2. 作为单纯函数的调用

    function fooCoder(x) {

        this.x = x;

    }

这里this指向全局对象,即window;严格模式中,则是undefined

3. 作为对象的方法调用

    var name = "yiwq";

    var person = {

        name : "Ancle",

        hello : function(sth) {

        console.log(this.name + " says " + sth);

        }

    }

    person.hello("hello world!");// Ancle says hello world!

这里this指向person对象,即当前对象

4. 构造函数内部

    new FooCoder();

    这里this指向当前对象

5. 内部函数

    var name = "yiwq";

    var person = {

        name : "Ancle",

        hello : function(sth) {

            var sayHello = function(sth) {

                console.log(this.name + " says " + sth);

            };

        sayHello(sth);

        }

    }

    person.hello("hello world!");// yiwq says hello world!

内部函数中,this对象并没有预想中的绑定到外层函数所属的对象上,而是绑定到了全局对象(window)。一般的处理方式,将this作为变量保存下来,通常约定为that或self

    var name = "yiwq";

    var person = {

        name : "Ancle",

        hello : function(sth) {

            var self = this;

            var sayHello = function(sth) {

                console.log(self.name + " says " + sth);

            }

        sayHello(sth);

        }

    }

    person.hello("hello world!");// Ancle says hello world!

简单总结

1. 当函数作为对象的方法调用时,this指向该对象

2. 当函数作为淡出函数调用时,this指向全局对象(严格模式下,为undefined)

3. 构造函数中的this指向新创建的对象

4. 嵌套函数中的this不会继承上层函数的this,如果需要,可以用一个变量保存上层函数的this

函数中的this

    JavaScript中函数调用的四种方式及函数中this相关的东东:

        a. 方法调用模式:作为对象属性调用 obj.func();

        b. 函数调用模式:指向全局,直接调用 func();

        c. 构造器调用模式new方式调用,会隐式创建一个新对象及隐藏链接至函数prototype成员

        d. call/apply调用模式:动态改变this指向的怪咖

    函数代码中this值的第一个特性(也是最主要的)就是:它并非静态的绑定在函数上。它的值是在函数进入执行上下文的阶段确定的;并且一旦进入执行上下文后,其值就不能改变了。

转载于:https://my.oschina.net/u/1251536/blog/412417

你可能感兴趣的文章
openlayers入门开发系列之批量叠加zip压缩SHP图层篇
查看>>
Javascript调用Webservice的多种方法 .
查看>>
Linux 启动、关闭、重启网络服务
查看>>
Sublime Text 相关
查看>>
深入理解css优先级
查看>>
android的armeabi和armeabi-v7a
查看>>
android自己定义控件系列教程-----仿新版优酷评论剧集卡片滑动控件
查看>>
lvs之 lvs+nginx+tomcat_1、tomcat_2+redis(lvs dr 模式)
查看>>
让“是男人就下到100层”在Android平台上跑起来
查看>>
hdu4292Food(最大流Dinic算法)
查看>>
webdriver API study
查看>>
【Machine Learning in Action --4】朴素贝叶斯过滤网站的恶意留言
查看>>
Ubuntu+Eclipse+ADT+Genymotion+VirtualBox开发环境搭建
查看>>
Android 学习之 开源项目PullToRefresh的使用
查看>>
Matplot中文乱码完美解决方式
查看>>
tomcat的webappclassloader中一个奇怪的异常信息
查看>>
漫谈程序猿系列:群星闪耀的黄金时代
查看>>
2016百度编程题:蘑菇阵
查看>>
webpack系列之一总览
查看>>
如何打造BCH使用的刚性需求?
查看>>