您的位置：首页 > Web前端 > JavaScript

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

2016-11-27 00:00 323 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航