this指向相关题目

时间 2019-12-06

标签指向相关题目繁體版

原文原文链接

题目一javascript

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 6php

解析：匿名函数调用方式this指向的window，因此第一个为3 方法调用模式，this指向的obj，因此为6.java

题目二数组

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); 
复制代码

答案：bash

10  10  20  30
复制代码

解析：call和apply没有参数，指向的是window。有参数指向的是前面调用的。app

题目三函数

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 30ui

解析：this

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。spa

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。