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

js函数作用域及this指向

2017-05-12 16:50 399 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="result">代码输出结果：<br/></div>
<!--当不用this时-->
<!--<script>-->
<!--var name = 'window下的name<br/>';-->
<!--var resultCon;-->
<!--function fn1() {-->
<!--resultCon.innerHTML += name;-->
<!--}-->

<!--function MyObj() {-->
<!--var name = 'MyObj下的name<br/>';-->
<!--this.doFunction = function() {-->
<!--resultCon.innerHTML += name;-->
<!--};-->
<!--}-->
<!--window.onload = function() {-->
<!--resultCon = document.getElementById('result');-->
<!--var name = "onload下的name<br/>";-->
<!--var fn2 = function() {-->
<!--resultCon.innerHTML += name;-->
<!--};-->
<!--fn1();//window下的name-->
<!--fn2();//onload下的name-->
<!--var obj = new MyObj();-->
<!--obj.doFunction();//MyObj下的name-->
<!--};-->
<!--</script>-->

<!--当使用this时-->
<!--<script>-->
<!--var name = 'window下的name<br/>';-->
<!--var resultCon;-->
<!--function fn1() {-->
<!--resultCon.innerHTML += this.name;-->
<!--}-->

<!--function MyObj() {-->
<!--var name = 'MyObj下的name<br/>';-->
<!--this.doFunction = function() {-->
<!--resultCon.innerHTML += this.name;-->
<!--};-->
<!--}-->
<!--window.onload = function() {-->
<!--resultCon = document.getElementById('result');-->
<!--var name = "onload下的name<br/>";-->
<!--var fn2 = function() {-->
<!--resultCon.innerHTML += this.name;-->
<!--};-->
<!--fn1();//window下的name-->
<!--fn2();//window下的name-->
<!--var obj = new MyObj();-->
<!--obj.doFunction();//undefined-->
<!--};-->
<!--</script>-->
<!--说明了：-->
<!--对于直接定义的函数，this指向window。-->
<!--对于对象的方法，this指向实例化对象（对应于实例化对象默认返回this的情况）-->

<!--当使用apply、call-->
<!--<script>-->
<!--var name = 'window下的name<br/>';-->
<!--var resultCon;-->
<!--function fn1() {-->
<!--resultCon.innerHTML += this.name;-->
<!--}-->

<!--function MyObj() {-->
<!--var name = 'MyObj下的name<br/>';-->
<!--this.doFunction = function() {-->
<!--resultCon.innerHTML += this.name;-->
<!--};-->
<!--}-->

<!--window.onload = function() {-->
<!--resultCon = document.getElementById('result');-->
<!--var name = "onload下的name<br/>";-->
<!--var fn2 = function() {-->
<!--resultCon.innerHTML += this.name;-->
<!--};-->
<!--var myThis = {-->
<!--name: "自定义的this的name属性<br/>"-->
<!--};-->
<!--fn1.call(myThis);//自定义的this的name属性-->
<!--fn2.call(myThis);//自定义的this的name属性-->
<!--var obj = new MyObj();-->
<!--obj.doFunction.call(myThis);//自定义的this的name属性-->
<!--};-->
<!--</script>-->
<!--调用时call和apply的使用是为了改变被调用函数的this指向-->

<!--当使用this-->
<!--<script>-->

4000
<!--var name = 'window下的name<br/>';-->
<!--var resultCon;-->
<!--function fn1(myScope) {-->
<!--with (myScope) {-->
<!--resultCon.innerHTML += name;-->
<!--}-->
<!--}-->

<!--function MyObj(myScope) {-->
<!--var name = 'MyObj下的name<br/>';-->

<!--this.doFunction = function(myScope) {-->
<!--with (myScope) {-->
<!--resultCon.innerHTML += name;-->
<!--}-->
<!--};-->
<!--}-->
<!--window.onload = function() {-->
<!--resultCon = document.getElementById('result');-->
<!--var name = "onload下的name<br/>";-->
<!--var fn2 = function(myScope) {-->
<!--with (myScope) {-->
<!--resultCon.innerHTML += name;-->
<!--}-->
<!--};-->
<!--var myScope = {-->
<!--name : "自定义变量查询域</br>"-->
<!--};-->

<!--fn1(myScope);//自定义变量查询域-->
<!--fn2(myScope);//自定义变量查询域-->
<!--var obj = new MyObj();-->
<!--obj.doFunction(myScope);//自定义变量查询域-->
<!--};-->
<!--</script>-->
<!--with的使用是为了改变被调用函数中变量的查询域。-->
<!--在一些成熟的框架中随处可见call和apply的使用，却很少用到with，在用JSHint检测js语法的时候with处都标了小红点，在一些js编码指导中
也建议尽量少用with，因为with改变了变量的默认查询链，所以会给后期的维护人员一些困惑，还有性能方面的一些考虑，请慎用with。-->
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript this 函数作用域
相关文章推荐
新的分享
章节导航