JavaScript初阶----------This指向问题

Posted 2020-10-16

模仿jQuery实现链式调用模式

　　 有时候我们需要像jQuery一样连续调用方法，这时候我们就要用到this了。

　　

var deng = {
    smoke : function () { 
        console.log("smoke,cool!!");
        return this;
    },
    firehair : function () {
        console.log(‘fire‘);
        return this;
    },
    drink : function () { 
        console.log("drink");
        return this;
    }
}
deng.smoke().firehair().drink();

 

   以上代码就是实现了链式调用，当函数一调用执行就会返回自己。

 

---

 

 

this指向问题

 　　1.函数预编译过程，this----->window

　　2.全局作用域      this -----> window

　　3.call / apply，改变this指向，指向第一个参数

　　4.object.function() { }     this ------> object

 

　　例如：

var obj = {
	age : 20,
	smoke : function () {
		console.log(this);
	}
}
var smoke1 = obj.smoke;
smoke1();

　　

　　在这个例子当中，把函数体给smoke1，这时候smoke1执行的时候，就相当于自己执行，没有人调用它，所以这时候，正常走预编译环节，指向的是window。

 

再来个比较复杂的，例如：

              var name = "222";
              var a = {
                  name : "111",
                  say : function () {
                      console.log(this.name);
                  }
              }
              var fun = a.say;
              fun();  //  222
              a.say();  //  111
              var b = {
                  name : "333",
                  say : function (fun) {
                      fun();
                  }
              }
              b.say(a.say); // 222
              b.say = a.say; 
              b.say(); // 333

 

　　

 

　　 先是将对象a的函数体给fun，然后fun执行就相当于执行自己的函数，这是this指向的是window，然后对象a调用自己的say方法，这时this指向a，接下来第三个是将a对象里面的函数体

拿出来自己执行，这时候this指向的是window，最后是将a.say里面的函数体给了b.say的函数体，这时候this指向b，用的对象a里面的方法。

 

---

 

 

属性的表示方法

　　我们一般用obj.prop的方法来引用属性，但是有时候当我们需要通过变量传参的形式调用属性会报错，所以我们采用下面这种形式

console.log(obj["prop"]);//obj["prop"]

　　

　　通过这种方法调用属性，是系统最后的转换形式，就算我们使用点的形式来进行属性的调用，系统内部最后还是会将它转化为中括号的形式。另外就是，通过中括号的形式调用属

性，还能进行属性的拼接：

           function getProp(num){
                var obj = {
                    friend1 : "a",
                    friend2 : "b",
                    friend3 : "c"
                }
                console.log(obj["friend1"]+num+obj["friend2"]+obj["friend3"]);
            }
            getProp("e");//aebc