JavaScript之初探this

最近一直在看《你不知道的javascript》很有感触,结合书中的一些观点再加上现实的一些例子,准备与大家分享一下我的心得体会。


引入

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 指向全局;在不带任何修饰的函数引用进行调用的 都是默认绑定

  1. 隐式绑定

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

  1. 显式绑定

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();//2
getName();//4
Foo().getName();//1
getName();//1
new Foo.getName();//2
new Foo().getName();//3
new 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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容