js函数作用域及this指向

来源：互联网发布：python获取当前日期编辑：程序博客网时间：2024/06/04 18:35
<!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>-->            <!--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>
0 0