this指向相關題目

題目一

var x = 3;
var y = 4;
var obj = {
     x: 1,
     y: 6,
     getX: function () {
         var x = 5;
         return function () {
             return this.x; 
         }();
     },
     getY: function () {
         var y = 7;
         return this.y; 
     }
 }
 console.log(obj.getX())
 console.log(obj.getY())
複製代碼

答案：3 6

解析：匿名函數調用方式this指向的window，因此第一個爲3 方法調用模式，this指向的obj，因此爲6.

題目二

var a = 10;
var foo = {
    a: 20,
    fn: function () {
        console.log(this.a);
    }
};
var bar = {
    a: 30
}
foo.fn.call();
foo.fn.apply(); 
foo.fn.apply(foo); 
foo.fn.apply(bar); 
複製代碼

答案：

10  10  20  30
複製代碼

解析：call和apply沒有參數，指向的是window。 有參數指向的是前面調用的。

題目三

function fn() {
    this.a = 0;
    this.b = function() {
        alert(this.a)
    }
}
fn.prototype = {
   b: function() {
       this.a = 20;
       alert(this.a);
   },
   c: function() {
       this.a = 30;
       alert(this.a);
   }
}
var myfn = new fn();
myfn.b();
myfn.c();
複製代碼

答案： 0 30

解析：

var myfn = new fn();建立了一個實例，this指向了這個fn。而後__proto__屬性指向了fn的prototype的屬性。而myfn的實例上有a和b。（即fn裏的this.a和this.b）。它的__proto__屬性（至關於fn的prototype屬性）上有b和c（這裏有兩個b，若是調用b。會先在實例上查找。查找不到再沿着__proto__屬性去查找。所以myfn.b()先在myfn實例上找。實例上有this.a和this.b，這個this指向的myfn所以執行b()=>myfn.a也就是0。

this.b = function() {
    alert(this.a)
}
複製代碼

當執行myfn.c()時，執行c函數從實例myfn上查找沒有c，因而到myfn的__proto__屬性上找c。找到了

c: function() {
   this.a = 30;
   alert(this.a);
}
複製代碼

因此alert(30).

題目四

var foo = {
    bar: function () {
        return this.baz;
    },
    baz: 1
};
(function () {                                                                                                                                                                                    
    console.log(typeof arguments[0]());
})(foo.bar);
複製代碼

答案：undefined

解析：

題目五

var a = 'javascript';
var obj = {
    a : 'php',
    prop : {
        getA : function() {
            return this.a;
        }
    }
}

console.log(obj.prop.getA());
var text = obj.prop.getA;
console.log(text());

複製代碼

答案：undefined javascript

解析：第一個是方法調用模式，this指向的obj.prop.這個做用域裏沒有變量a。因此爲undefined。第二個函數調用模式，this指向的window。因此爲javascript。

題目六

var fn=function(){
    console.log(fn)
}
fn()
var obj={
    fn2:function(){
        console.log(this.fn2)
        console.log(fn2)
    }
}
obj.fn2()
複製代碼

答案：

f(){
    console.log(fn);
}
f(){
    console.log(this.fn2)
    console.log(fn2)
}
fn2 is not defined
複製代碼

解析：

做用域：變量起做用的區域,就是說一個變量聲明好了，能在哪一個範圍內使用。 obj.fn2() =>方法調用模式，this指向的是obj。this.fn2 => obj.fn2 。obj內部定義了一個fn2方法。因此this.fn2 指的是

f(){
    console.log(this.fn2)
    console.log(fn2)
}
複製代碼

fn2 => 由於obj內部不是做用域，因此沒有找到fn2。因此報錯。

題目七

var x = [typeof x , typeof y][1];
console.log(typeof typeof x);
複製代碼

答案：string

解析： var x = [typeof x , typeof y][1] ==>至關於 arr = [a,b,c][1];取數組裏的b元素。這題取的是數組的typeof y。由於y未聲明。因此是undefined。typeof undefined => string

題目八

var c = 1;
function c(c) {
    console.log(c);
    var c = 3;
}
c(2);
複製代碼

答案：c is not a function

解析：c賦值爲1，1.typeof爲number,c爲整型變量了。因此報錯。

題目九

var a = null;
alert(typeof a);
複製代碼

答案：object

解析：

先說一下typeof的用法（以判斷n的數據類型爲例）
用法一：typeof(n) 
用法二：typeof n
數據類型包括六大類：number、string、boolean、undefined、object、function
1.number
console.log(typeof(123));  -- > number
console.log(typeof(NaN));  -- > number
console.log(typeof(0));    -- > number
2.string
console.log(typeof('a'));  -- > string
3.boolean
console.log(typeof(false)); -- > boolean
console.log(typeof(true));  -- > boolean
4.undefined
兩種狀況：
變量未聲明時
    console.log(typeof(a));  -- > undefined
變量的值就是undefined時
    var a = undefined;
    console.log(typeof(a));  -- > undefined
5.object
    var a = {};//對象
    console.log(typeof(a));   -- > object

    var b = [];//數組
    console.log(typeof(b));    -- > object

    console.log(typeof(null));  -- > object  //特殊的
6.function
    var a = function () {}; //函數/方法
    console.log(typeof(a)); -- > unfction
針對轉換成布爾型是false的那六個
    console.log(typeof(undefined)); -- > undefined
    console.log(typeof(NaN));       -- > number
    console.log(typeof(""));        -- > string
    console.log(typeof(null));      -- > object
    console.log(typeof(false));     -- > boolean
    console.log(typeof(0));         -- > number
拓展：
    console.log(typeof(a));         -- > undefined
    console.log(typeof(undefined)); -- > undefined
可是
    console.log(typeof(typeof(a)));  -- > string
複製代碼

題目十

var add = true;
console.log(add + 0);
console.log(add + "xyz");
console.log(add + true);
console.log(add + false);
複製代碼

答案：1 1xyz 2 1

解析：

Number + Number - > 加法
Boolean + Number - > 加法
Boolean + Boolean - > 加法
Number + String - > 鏈接
String + Boolean - > 鏈接
String + String - > 鏈接
複製代碼

題目11

var obj1 = {
  name: "blue",
  fn: function(){
      alert(this.name);
      }
};
var newFunction = obj1.fn;
newFunction();
複製代碼

答案： 空

解析：由於是函數調用模式，this指向的window。而window下面有name屬性：window.name是爲空。因此結果爲空。

題目12

var fullname = '1';
var obj = {
    fullname: '2',
    prop: {
        fullname: '3',
        getFullname: function () {
            return this.fullname;
        }
    }
}
console.log(obj.prop.getFullname());
var test = obj.prop.getFullname;
console.log(test())
複製代碼

答案：3 1

解析：

obj.prop對象裏有個fullname屬性賦值爲3。而this.fullname這個this指向的obj.prop,因此第一個打印爲3。 第二個是函數調用，this指向window。因此1。

題目13

var age = 38;
var obj = {
    age: 18,
    getAge: function () {
        console.log(this.age);
    }
}

var f = obj.getAge;
f();
複製代碼

答案：38

解析：關鍵點看f是何種調用模式 函數名() ==> 函數調用模式 this ,window

題目14

var age = 38;
var obj = {
  age:18,
  getAge: function () {
    console.log(this.age);

    function foo(){
      console.log(this.age);
    }
    foo();
  }
}

// obj.getAge();  
obj["getAge"]();
複製代碼

答案：18 38

解析：第一個調用是方法調用模式。因此this指向的obj ，所以打印的爲18 第二個foo()調用的是函數調用模式，所以打印的是38.

題目15

var length = 10;
var age = 18;
function fn() {
    console.log(this.length); 
}
var arr = [fn, "222"];


fn();

arr[0]();   
複製代碼

答案：10 2

解析： 函數調用模式 => 10 方法調用模式arr[0] ==> fn裏面打印的是this.length 而這個this指向的arr arr.length爲2

題目16

var length = 10
function fn() {
    console.log(this.length)
}
var obj = {
    length: 5,
    method: function (fn) {
        fn();    
        arguments[0]();  
    }
}
obj.method(fn, 10, 5, 2, 6); 
複製代碼

答案：10 5

解析：obj.method(fn, 10, 5, 2, 6); => fn傳入進去，fn()調用=>函數調用模式因此第一個爲10. arguments0 => arguments指向的實參列表,是僞數組=>[fn, 10, 5, 2, 6]。 arguments0是方法調用。arguments[0]=>fn打印this.length。this指向的arguments.因此arguments.length爲5。