您的位置：首页 > Web前端 > JavaScript
js中this的指向

2016-03-08 10:02 513 查看
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>深入理解This</title>
</head>
<body>
<script>
//它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。
//随着函数使用场合的不同，this的值会发生变化。
//但是有一个总的原则，那就是this指的是，调用函数的那个对象。
//demo1
function demo1(){
var test1="zyn";
console.log(this.test1);//undefined
console.log(this);//window
}
//调用
demo1();
//解析:
//就是this指的是，调用函数的那个对象。
//demo1函数是被window调用的，所以this就指向了window
//this.zyn输出undefined因为this指向了window，
//在window下没有test1属性(函数内部可以访问函数外部变量，反之不可(闭包除外));
//调用方式 demo1();等价于 window.demo1();

//demo2
//字面向量创建函数
var parent={
test2:"zyn",
fun:function(){
console.log(this.test2);//zyn
console.log(this);//o
}
}
//调用
// parent.fun();
//解析
//就是this指的是，调用函数的那个对象。(既调用fun函数的对象)
//上面 点 调用方式看出 fun函数是通过parent调用的，所以this指向了parent
//在parent也就是this下面存在变量test2变量，所以将其输出

//demo3
var demo3={
test3:"xx",
fun:{
de:'zyn',
func:function(){
console.log(this.de);//zyn
console.log(this.test3);//undefined
}
}
}
//调用
demo3.fun.func();
//解析
//就是this指的是，调用函数的那个对象。(既调用func函数的对象)
//上面 点 调用方式看出 func函数是通过 demo3.fun调用的，所以this指向了fun
//在fun也就是this下面存在变量de变量，所以将其输出
//调用方式 demo3.fun.func();等价于 window.demo3.fun.func();

//demo5
var demo5={
test3:"xx",
fun:{
de:'zyn',
func:function(){
console.log(this.de);//undefined
console.log(this);//window
}
}
}
//调用
var exe=demo5.fun.func;
exe();
//解析
//demo5与demo4,不同之处在于调用函数的方式
//demo5调用方式分为两步
//var exe=demo5.fun.func; 将func函数的执行权利赋值给了exe变量，
//注意 因为var exe 相当与  window.exe exe处在window的作用域下面
//通过exe来执行，this的指向就变成了window
//调用方式  exe();等价于 window.exe();

//demo6
//构造函数
function demo6(){
this.test6="zyn";
}
//调用
var demo6Faild=new demo6();
console.log(demo6Faild.test6);//zyn
//解析
//因为用了new关键字就是创建一个对象实例
//并且将对象实例赋值给demo6Faild，所以this指向了demo6Faild(相当于demo6)
//在demo6和demo6Faild也就是this下面存在变量test6变量，所以输出zyn

//demo7
function demo7(){
this.test7="zyn";
return {};
}
var de6=new demo7();
console.log(de6.test7);//undefined
function demo7(){
this.test7="zyn";
return function() {};
}
console.log(de6.test7);//undefined

function demo7(){
this.test7="zyn";
return 1;
}
console.log(de6.test7);//zyn

function demo7(){
this.test7="zyn";
return undefined;
}
console.log(de6.test7);//zyn

function demo7(){
this.test7="zyn";
return null;
}
console.log(de6.test7);//zyn
//解析
//如果返回值是一个对象，那么this指向的就是那个返回的对象，
// 如果返回值不是一个对象那么this还是指向函数的实例。
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签： 函数对象
相关文章推荐
新的分享
章节导航