网上看到一句话,匿名函数的执行是具备全局性的,那怎么具备的全局性呢?闭包内部this的指向是window,为何指向了window呢?下面经过js函数调用模式和部分案例分析了为何确实如此
var obj = { val : 1, show : function(){alert(this.val);},//方法调用模式 outFunc : function(){ function innerFunc(){ console.log(this); } innerFunc(); //函数调用模式 } }; obj.innerFunc(); //在严格模式下,console.log(this)中的this为undefined, //不然,console.log(this)中的this为全局对象(浏览器中为window) //下文讲解为何
当以new来调用一个函数时,即构造器模式。
当使用new调用时,发生这些事情:
建立一个链接到该函数prototype的新对象
将this绑定到建立的新对象上
函数结束时,若是没有返回其它对象,就返回this,即新建立的对象。编程
var quo=function(string){ this.status=string; } quo.prototype.get_status=function(){ return this.status; } var qq=new quo("aaa"); alert(qq.get_status());
var myobject={}; var sum = function(a,b){ return a+b; }; var sum2 = sum.call(myobject,10,30); //var sum2 = sum.apply(myobject,[10,30]); alert(sum2);
var person = { name :'one', sayOne:function () {//方法调用模式 console.log(this.name) }, sayTwo:function () {//函数调用模式 return function () { console.log(this.name) } }, wrap: function(){//函数调用模式,匿名函数的执行环境具备全局性的由来 (function (){ console.log(this.name) })() } } person.sayOne()//one sayOne调用者是person对象,因此this指向person;(方法调用模式) person.sayTwo()()//window 返回的匿名函数在全局执行因此是window(函数调用模式) person.wrap()//window 语言就是这样设计的,也是匿名函数具备全局性的由来(函数调用模式)
var div=document.getElementById("one"); function f2(){ console.log(this) } div.onclick =function () { console.log(this)//one那个节点 f2()//window(函数调用模式) }
1.throttle函数的执行环境具备全局性,内部this一般是指向window的,而后返回一个匿名函数。
2.返回的匿名函数绑定了事件,this指向监听的元素(document)
3.fn其实与上面返回匿名函数造成了闭包,且fn也实际上是一个匿名函数,匿名函数的执行具备全局性,fn内部this应该指向window
4这里用apply修正this指向,使fn内部的this从新指向document浏览器
function throttle(fn, delay) { console.log(this)//window // 记录上一次函数触发的时间 var lastTime = 0; return function() { // 记录当前函数触发的时间 var nowTime = Date.now(); if(nowTime - lastTime > delay) { /* fn(); console.log(this)//document */ fn.apply(this)// 修正this指向问题 console.log(this)//document // 同步时间 lastTime = nowTime; } } } document.onscroll = throttle(function() { /*console.log(this)//window*/ console.log(this)//document console.log('scroll事件被触发了' + Date.now()) }, 1000)
var name = "global"; var foo = { name: "foo", getName : function(){ console.log(this.name); } } var bar = { name: "bar", getName : function(){ return (function(){ console.log(this.name); })(); } } foo.getName(); //foo foo.getName.call(bar); //bar foo.getName.call(this); //global foo.getName.call(window); //global (function(){ console.log(this.name) }.bind(bar))(); //bar (function(){ console.log(this.name) }.bind())(); //global