JavaScript之初探this

引入

demo1:

function foo(num){  console.log(`foo:${num}`);  this.count++;  //console.log(this.count)}foo.count = 0;var i;for(i=0;i<10;i++){  if(i>5){   foo(i) }}console.log(foo.count);//foo:6//foo:7//foo:8//foo:9//0

demo2:

debugger //debugger会进入调试模式function foo(){    var a = 2;    this.bar();}function bar(){    console.log(this.a)}foo()

---

绑定规则

1. 默认绑定

   默认绑定this 指向全局；在不带任何修饰的函数引用进行调用的 都是默认绑定

2. 隐式绑定

   是否被某个对象拥有或者包含，若是则为隐式绑定，this绑定到函数引用的上下文引用函数（如setTimeout中调用的）会使隐式绑定丢失 从而变成默认绑定

3. 显式绑定

var a= {    name: 'hello',    test:function(x,y){        console.log(this.a+""+x+""+y);    }}var b = a.test()b()//undefined

3.1 call

 b.call(a,x,y) //将b的this指向a，并传入参数

3.2 apply

 b.apply(a,[x,y]) //将b的this指向a，并传入参数

ps:call/apply this指向为null的时候，指向的是window

3.3 bind

var c=b.bind(a,x,y) //将b的this指向a,并传入参数 然后返回一个新的函数c(); 

1. new 绑定

使用new来调用函数的时候，会自动执行下面的步骤

4.1 创建一个全新的对象

4.2 这个新对象会被执行[[原型]]连接

4.3 新对象会被绑定到函数调用的this

4.4 如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个对象

eg:

function foo(a){    this.a=a;}var bar=new foo(2)console.log(bar.a) //2

---

小试牛刀

下面用网上一个比较火的例子 来练习一下。

function Foo() {    getName = function () { alert (1); };    return this;}Foo.getName = function () { alert (2);};Foo.prototype.getName = function () { alert (3);};var getName = function () { alert (4);};function getName() { alert (5);}//请写出以下输出结果：Foo.getName();//2getName();//4Foo().getName();//1getName();//1new Foo.getName();//2new Foo().getName();//3new new Foo().getName();//3

1. Foo.getName()： 直接调用Foo.getName = function () { alert (2);};

2. getName()：这里又再次涉及到了变量提升，这里我们通过编译器相关原理来解释; 首先是声明阶段 然后才是赋值一些的操作; 所以顺序应该是

   var getName;function getName() { alert (5);}getName=function () { alert (4);};

3. Foo().getName(); 直接调用function Foo() {
   getName = function () { alert (1); };
   return this;
   } // 注意智力getName的值已经修改为1

4. getName() // 1

5. new Foo.getName() // new的优先度 小于. 所以为 new (Foo.getName)()

6. new Foo().getName() // () > . > new ，所以 (new Foo()).getName() //new Foo 返回
   新foo函数，因为内部的getName没有绑定this，所以不会再new之后拥有，于是回去原型链查找

7. new new Foo().getName() // 同上 3