如何更好的理解js中的this，分享2段有意思的代

JavaScript022

如何更好的理解js中的this，分享2段有意思的代,第1张

如何更好的理解js中的this，分享2段有意思的代码

----------------第一段--------------------

function a(xx){this.x=xxreturn this}

var x=a(5)var y=a(6)

console.log(x.x)

console.log(y.x)

输出：

undefined  //console.log(x.x)

6          //console.log(y.x)

Why?

其实这段代码还是比较有误导性的，我们来简化并且分解一下，简化后如下。

function a(xx){

  this.x = xx

  return this

}

var x = a(5)

console.log(x.x)

我们主要分析一下 var x = a(5) 调用a函数时发生了什么。

由于在window层面下，我们可以这样改写这句。

window.x = window.a(5) //这句等同于 var x = a(5)

1、我们先看等号【右侧 var x = a(5)】部分，也就是执行a(5)这个函数的时候发生了什么，因为其在window层面下，你可以理解为 window.a(5)，基于javascript中关于this的理解，【谁调用该函数，里面的this指向谁】，

那么在这里，很显然，是window调用了函数a，里面的this当然指向window。

在函数执行时第1句： this.x = xx//由于传入的值是常数5，那么this.x=5，没有问题吧ok，进一步，this指向是谁呢，谁调用的该函数，this就是谁，那么在这里显然是window调用的函数a，那么this指向的就是window，于是我们可以这样写，window.x = 5   请注意，这里很重要，此时此刻window.x=5, 表明window层下面有一个x属性，并且值为常数5

在函数执行时第2句：return this  // this同样指向的是window, 所以返回window a(5)执行完毕，返回window

2、接着看等号【左侧 var x = a(5)】部分，也就是var x，也就是说我们在window层面下申明一个名为x的变量  前面第一句【this.x=xx】执行完毕，已经在window下面产生了一个属性x，也就是上面加粗部分 window.x  而现在我们又在window层面下申请一个变量x ，显然后面这个申明的x会覆盖掉第一句在【this.x】产生的window.x。

最终：a(5)执行完毕，返回window对象，并赋值给变量x，那么在console.log(x.x) 输出window

问题来了，不是说输出undefined吗？现在我们整段一起看。

function a(xx){

   this.x=xx

   return this

}

 

var x=a(5)

//console.log(x.x) 如果此时我们作输出，没错，得到的就是window。问题在下面这一句

var y=a(6)  //调用函数a(6) 会造成 window.x =6  再么接下来再输出console.log(x.x), 由于x=6  console.log(6.x)肯定是无效的，因此为undefined

console.log(x.x) // undefined

console.log(y.x) // 6

总结：定义的a方法，直接调用this对象指向的是window全局变量。在x=a（5）时，this.x就是window.x得到的是5，后来x接到了返回值是window.

这一点你可以把y=a（6）注释掉执行看到！然后再调用y=a（6），这时候this.x把之前的x改写成6，成了一个数值型的变量了。

这时候y接到了返回的window，x.x不存在，y.x就是被改写的那个6了！

----------------第二段--------------------

var obj = {

  go: function() { alert(this) }

}

(0 || obj.go)()  //这里为什么输出window 啊

window.onload是页面加载完了之后会触发。

js中函数可以像变量一样操作，这里的func是个函数。

这个函数的作用是如果之前没有定义页面加载完做什么，

那么页面加载完就出发func，如果之前有定义了，那就触发完之前定义的之后再做func

function addLoadEvent(func)

{

//初始化oldonload函数= window.onload

var oldonload = window.onload

//如果window.onload的类型！=function

if (typeof window.onload != 'function') {

//重新赋值为传入的func

window.onload = func

}

else {

//定义window.onload=以前的函数再加上传进来的函数。

window.onload = function() {

oldonload()

func()

}

}

}

var sum=0

for(var j=0j<9j++){

while(j%2=0)

sum+=chengji[j]

}

1%2=1 0%2=0// %为求余也

20%30=20 15%3=0

OK就这样吧