1. 程式人生 > >合縱連橫: 物件 this指向小結 及面試題

合縱連橫: 物件 this指向小結 及面試題

簡單的介紹下什麼是物件 :

  1. 只要是物件就有自己的私有屬性
  2. 只要是new出來的都是物件
  3. 不同的物件肯定不相等
  4. 物件都會有引用機制,如果不想引用就重新賦值

這四點是我總結出來的,可能不是很全面,畢竟我也是才剛剛入門!

this指向問題

  1. 在普通函式下this指向的我window
  2. 有事件源指向事件源
  3. 全域性作用域this:在定時器下除es6,this指向window
  4. 在物件下this指向的是自己本身

這四點是我總結出來的,可能不是很全面,畢竟我也是才剛剛入門!

接下來是一些小小的測試題,難度不是很深,我會把答案放在下一題中,有的答案也可以直接輸出的:

this-指向: 舉例 1:


<script>
        var num = 10;
        var obj = {
            num: 8,
            inner: {
                num: 6,
                print: function () {
                    console.log("num: " + num + " , this.num: " + this.num);
                }
            }
        }
        num = 888;
        // 第一次執行
        obj.inner.print();
        // 第二次執行
        var fn = obj.inner.print; 
        fn();
        // 第三次執行
        (obj.inner.print)(); 
        // 第四次執行
        (obj.inner.print = obj.inner.print)(); 
    </script>

舉例2:

 <script>
        var foo=123;
            function print(){
                this.foo=789;
                console.log(foo);
            }
            print();
         new print();
    </script>
    舉例1:答案:
     		 // num: 888 , this.num: 6    
            //  num: 888 , this.num: 888, this: Window   
            //  num: 888 , this.num: 6   
            //  num: 888 , this.num: 888 , this: Window

舉例3:

 <script>
        var a=5;
            function test(){
                a=0;
                alert(a);
                alert(this.a);
                var a;
                alert(a);
            }
            test();
            new test();
    </script>
    舉例2 答案:
			   // 執行print函式,函式裡面沒有foo,檢視全域性,foo=123,但print裡面的this指向是window,
            // 將123改為789了,所以得到的是789
            print();
            // 執行了一個新的print的函式,相當於在函式內部var this=object。create(print.prototype),
            // 此時this指向是函式內部了,不會改變123,所以得到的是123
         new print();

舉例4:壓軸題:答案自己console.log,

<script>
        var name = "222";
        var a = {
            name: "111",
            say: function () {
                console.log(this.name);
            }
        }
        var fun = a.say;
        fun();

        a.say();

        var b = {
            name: "333",
            say: function (fun) {
                fun();
            }
        }
        b.say = a.say;
        b.say(a.say);
        b.say();
       舉例3 答案:
       <script>
        var a=5;
            function test(){
            // var this=object.create()           隱式執行 new出來的  沒有a  返回undefined  
                a=0;
                alert(a);
                alert(this.a);
                var a;
                alert(a);
            }
            // 0,5,0
            test();
            // 0,undefined,0
            new test();
    </script>
    </script>