文档章节

javascript对象---7 Function函数 this指针

奋斗的小芋头
 奋斗的小芋头
发布于 2016/11/27 17:02
字数 905
阅读 7
收藏 1

this指针 :this在js中非常灵活,一般在代码运行时基于函数的运行环境绑定的,大致分5钟情况

1. 全局环境中 this 代表全局环境 (Window 对象);

不包含在任何function之内就是 全局环境,

<script>
        //在 Chrom浏览器中,在程序当中没有对this的 调用,那么在当前执行环境中,没有this指针
        //在function之外的 在调试台 查看this 直接获取window对象

             var that = this ;
        </script>

2.在普通函数或对象中, this代表运行环境对应的对象( 可以理解为调用者);

 var obj = {
                 win : this 
             }
             debugger

在调试台 查看 obj .win :window ------- this指window对象

查看调用者----obj的调用者为最外侧的 window对象

 var obj = {
                 win : this,
                 
                 sayHello :function(){
                     var that = this ;       //此时that指的是调用它的 Obj
                     debugger
                 }
             }
             obj.sayHello()

例2:

function outer(){
                var that = this;  // window对象
                debugger;
                inner();
                function inner(){
                    var that = this;  // window对象
                    debugger;
                }
            }
            outer();  //在 windows 层级调用outer() 所以 第一个that指 window对象
            //继续向下执行,调用inner 此时  第二个that 指的还是 window对象
            //在window环境下调用 outer(),在代码体执行情况下顺便调用 inner(),所以还是 window触发 
        //window 触发outer() ---》 outer()触发 inner(),整个执行的最终环境还是window对象

例3:

    function outer(){  //函数也是一个对象
            
        }
        
        //上一种创建方法中 outer()是无法访问 inner()
        //给函数对象outer扩展一个函数
        outer.inner=function(){
            var that = this;        //this指针指向 outer对象
            debugger;
        }
        outer.inner()

 

3.在普通匿名函数中, this代表 window 对象。

//匿名函数 1. 在一个小括号内定义   ,定义后函数存在在内存中,但无法通过名字调用函数--- 一般操作是定义后直接调用, 在预加载时检测不到,在运行时检测  ------创建后面加()调用

匿名函数执行完会清掉内存
        (function(){
            var that = this;  
//this 永远为window对象


        }) (); //调用

 

匿名函数的使用场景 :对于Js来说能区分作用域的只有function 

<script>

for(var i=0 ;i<3; i++) {      //这里 声明的 var i  为全局变量 ,全局变量在内存中不会被清除掉,只要网页不关闭,就会越执行越多,内存占用越来越多 ------
 

 }
     console.log(i);

</script>

>为了在程序执行后就将内存清除掉

1.执行后会弹栈等待垃圾回收 但 bb()作为全局变量仍会占内存

    function bb(){
            for(var i=0 ;i<3; i++) {
                
            }
        console.log(i);
        }

较好的解决方式 --用匿名函数解决


        (function(){
            for(var i=0 ;i<3; i++) {
                
            }
        })

alert( i ) ;---- i is not defined // 执行完已经清除

匿名函数的好处,可以替代不需要的全局变量,从而省略内存。匿名函数的 this 永远是 window

4.在构造函数中, this 代表当前调用构造函数创建的  对象  new出来的新对象

 

new Fun的执行过程

1.创建了一个空对象 obj

2.空对象的原型链(_proto_ )指向了函数对象prototype对象。

3.修改函数对象的this指针为新创建的对象引用  ---代表新创建对象的内存

4.执行函数体

在事件绑定事件处理函数时, this 代表触发事件的 dom对象

1.绑定方式1

function clickButton(){
            that = this;   //this = window对象
        }
        </script>
    </head>
    <body>
        <input type="button" value="aniniu" onclick="clickButton()">
    </body>

2.绑定事件2

    function clickButton(){
            that = this;  //this == input
            debuggers
        }
        </script>
    </head>
    <body>
        <input type="button" value="aniniu"  id= "but">
        <script>
            document.getElementById("but"). addEventListener ("click",clickButton())

//当前按钮对象绑定,所以 this是当前按钮对象。
        </script>
    </body>

© 著作权归作者所有

共有 人打赏支持
奋斗的小芋头
粉丝 1
博文 161
码字总数 129345
作品 0
大连
私信 提问
javascript技术难点(三)之this、new、apply和call详解

原文出处:夏天的森林 讲解this指针的原理是个很复杂的问题,如果我们从javascript里this的实现机制来说明this,很多朋友可能会越来越糊涂,因此本篇打算换一个思路从应用的角度来讲解this指...

夏天的森林
2014/12/10
0
0
谈谈javascript语法里一些难点问题(二)

原文出处:夏天的森林 3) 作用域链相关的问题 作用域链是javascript语言里非常红的概念,很多学习和使用javascript语言的程序员都知道作用域链是理解javascript里很重要的一些概念的关键,这...

夏天的森林
2014/12/10
0
0
javaScript中的this指针

this指针是面向对象程序设计中的一项重要概念,它表示当前运行的对象。在实现对象的方法时,可以使用this指针来获得该对象自身的引用。   和其他面向对象的语言不同,JavaScript中的this指...

卖火柴的format
2014/08/13
0
0
由Javascript的继承引发的:抽象类、接口、多态,甚至是类型转换!

工作中需要用到Javascript,关注了Javascript中继承复用的问题,翻阅了网上的各种关于Javascript继承的帖子,感觉大都思考略浅,并没有做过多说明,简单粗暴的告诉你实现Javascript继承有1.2...

xue777hua
2013/07/28
0
11
面向对象的JavaScript——类

在java里,我们定义类的时候用的是class关键字,但是JavaScript中class是保留字,另有用途,所以我们要采用其他的方法来定义JavaScript中的类。 定义类 利用JavaScript中的function关键字,类...

小微
2012/09/21
0
3

没有更多内容

加载失败,请刷新页面

加载更多

Linux Wireshark普通用户启动使用方案

当系统安装好Wireshark后请正常启动是否可以进行正常使用,如果不行请参考下列指导 向系统添加一个用户组 sudo groupadd wireshark //如提示此组存在可跳过 将指定用户添加到这个组中 sudo...

CHONGCHEN
今天
2
0
CSS 选择器参考手册

CSS 选择器参考手册 选择器 描述 [attribute] 用于选取带有指定属性的元素。 [attribute=value] 用于选取带有指定属性和值的元素。 [attribute~=value] 用于选取属性值中包含指定词汇的元素。...

Jack088
今天
2
0
数据库篇一

数据库篇 第1章 数据库介绍 1.1 数据库概述  什么是数据库(DB:DataBase) 数据库就是存储数据的仓库,其本质是一个文件系统,数据按照特定的格式将数据存储起来,用户可以对数据库中的数据...

stars永恒
今天
4
0
Intellij IDEA中设置了jsp页面,但是在访问页面时却提示404

在Intellij IDEA中设置了spring boot的jsp页面,但是在访问时,却出现404,Not Found,经过查找资料后解决,步骤如下: 在Run/Debug Configurations面板中设置该程序的Working Directory选项...

uknow8692
昨天
4
0
day24:文档第五行增内容|每月1号压缩/etc/目录|过滤文本重复次数多的10个单词|人员分组|

1、在文本文档1.txt里第五行下面增加如下内容;两个方法; # This is a test file.# Test insert line into this file. 分析:给文档后增加内容,可以用sed 来搞定;也可以用while do done...

芬野de博客
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部