1. 首页
  2. IT资讯

全网最全前端 this指向面试题

本篇文章主要是为了梳理各种this指向问题。

1 构造函数调用模式 new 一个函数出来,那么函数中this,如果没有显式返回对象或者函数,指向才是返回生成的新对象,如果有返回则指向返回的函数或者对象。

2 如果函数式对象的一个方法,并且通过点出发,那么this指向谁点方法的,就指向谁. 函数没有作为对象的方法调用,而是最后通过window调用,则指向window

3 原型链的调用中 指向新对象

4 箭头函数调用形式

题目一:

function Fn(){   this.a = 37; }  var obj = new Fn(); console.log(obj.a); // 37  function Foo(){   this.a = 37;   return { a: 38 }; }  obj = new Foo(); console.log(obj.a); //38 

(function(){     eval("console.log(this)"); })(); function Foo(){     this.bar = function(){         eval("console.log(this)"); // 指向这个function     } } var foo = new Foo(); foo.bar(); 

题目二: 法则二

var o = {     a: 10,     b: {         a: 12,         fn: function(){             console.log(this.a);              console.log(this);         }     } } o.b.fn();    // 指向b -------------------------------------------------------- // 变形 var o = {     a: 10,     b:  {         fn: function(){             console.log(this.a);              console.log(this);          }     } } o.b.fn();  ------------------------------------------------------- 

window调用

var o = {     a: 10,     b: {         a: 12,         fn: function(){             console.log(this.a);              console.log(this);            }     } } var j = o.b.fn;  j();     // window  ---------------------------------------------- function someFun(x) {      this.x = x;  }  someFun(5);  console.log(x);  ------------------------------------------------ 

题目三:原型链方式

function Student(name){     this.name = name; } var s1 = new Student('若川'); Student.prototype.doSth = function(){     console.log(this.name); } s1.doSth(); // '若川'

var point = {      x : 0,      y : 0,      moveTo : function(x, y) {          this.x = this.x + x;          this.y = this.y + y;         console.log(this.x);          console.log(this.y);      }  };  point.moveTo(1, 1) 

var point = {      x : 0,      y : 0,      moveTo : function(x, y) {         var moveX = function(x) {             this.x = x;        };         var moveY = function(y) {             this.y = y;        };        moveX(x);         moveY(y);      };  };  point.moveTo(1, 1);  console.log(point.x);  console.log(point.y); 

var point = {           x : 0,           y : 0,           moveTo : function(x, y) {               var that = this;               var moveX = function(x) {                   that.x = x;               };               var moveY = function(y) {                   that.y = y;              }               moveX(x);               moveY(y);           }      };      point.moveTo(1, 1);      console.log(point.x);     console.log(point.y);      console.log(x)     console.log(y) 

var point = {           x : 0,           y : 0,           moveTo : {               moveX: function(x) {                 console.log(this)                  this.x = x;              },              moveY: function(y) {                  this.y = y;              }          }      };      point.moveTo.moveX(1);      point.moveTo.moveY(1);     console.log(point.moveTo);       console.log(point.x);     console.log(point.y);      console.log(x)     console.log(y) 

function Point(x, y){         console.log(this);         this.x = x;         this.y = y;         this.moveTo = function(x,y){           this.x = x;           this.y = y;           console.log(this.x);           console.log(this.y);        }     }     var p1 =  new Point(0,0);       var p2 = {         x:0,         y:0     }     p1.moveTo(1,1);      p1.moveTo.apply(p2,[10,10]);      console.log(x);     console.log(y); 

var a = 10; var foo = {     a: 20,     fn: (function(){         console.log(this);          console.log(this.a);      })() } 

var a = 10; var oTimer1 = setInterval(function(){     var a = 20;     console.log(this.a);      clearInterval(oTimer1); },100); 

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

var length = 10;  function fn () {     console.log(this.length); }   var obj = {     length: 5,     method: function (fn) {         fn();         arguments[0]();     } };   obj.method(fn, 1); 

var length = 10;  function fn () {     console.log(this.length); }  var obj = {     length: 5,     method: function (fn) {                 fn.call(this);     } };   obj.method(fn); 

function identify() {     return this.name.toUpperCase(); }  var me = {     name: "Kyle" };  var you = {     name: "Reader" };  identify.call( me );  identify.call( you );  

function test(){   this.x = 1;   console.log(this.x); } test();  

function test(){     console.log(this.x); } var o = {}; o.x = 1; o.m = test; o.m();  

var x = 0; function test() {     console.log(this.x); } var o = {}; o.x = 1; o.m = test; o.m.apply();  

window.val = 1;   var obj = {     val: 2,     dbl: function () {         this.val *= 2;          val *= 2;                console.log('val:', val);         console.log('this.val:', this.val);     } };   // 说出下面的输出结果  obj.dbl();  var func = obj.dbl;  func(); 

    var num = 10;     var obj = {         num:8,         inner: {             num: 6,             print: function () {                 console.log(this.num);             }         }     }     num = 888;     obj.inner.print();      var fn = obj.inner.print;     fn();      (obj.inner.print)();      (obj.inner.print = obj.inner.print)(); 

var name = "caibaojian.com";  var person = {   name: "kang",   pro: {     name: "Michael",     getName: function() {       return this.name;     }   } }; console.log(person.pro.getName());  var pepole = person.pro.getName; console.log(pepole()); 

var name = "caibaojian.com"; var person = {   name: "kang",   pro: {     name: "Michael",     getName: function() {       console.log(this);       return this.name;     }   } }; console.log(person.pro.getName()); var pepole = person.pro.getName; console.log(pepole());  

'use strict'; var name = "caibaojian.com";  var person = {   name: "kang",   pro: {     name: "Michael",     getName: function() {       console.log(this);       return this.name;     }   } }; console.log(person.pro.getName());  var pepole = person.pro.getName; console.log(pepole());  

var name = "caibaojian.com",     person = {       name : "kang",       getName : function(){        return function(){          return this.name;        };       }     };  console.log(person.getName()()); 

console.log(this.document === document); console.log(this === window); this.a = 37; console.log(window.a); 

function foo(){   return this; }  foo() === window; 

function foo(){   "use strict";    return this; }  foo() === undefined; 

var obj = {   prop: 37,   foo: function() {     return this.prop;   } };  console.log(obj.foo()); 

var obj = { prop: 37 };  function independent() {   return this.prop; }  obj.foo = independent;  console.log(obj.foo()); 

var obj = { prop: 37 };  function independent() {   return this.prop; }  obj.b = {   g: independent,   prop: 42 };  console.log(obj.b.g()); 

var obj = {   f : function(){      return this.a + this.b;    } }; var p = Object.create(obj); p.a = 1; p.b = 4;  console.log(p.f()); 

function modulus(){   return Math.sqrt(this.re * this.re + this.im * this.im); }  var obj = {   re: 1,   im: -1,   get phase(){     return Math.atan2(this.im, this.re);   } };  Object.defineProperty(obj, 'modulus', {   get: modulus,   enumerable: true,   configurable: true });  console.log(obj.phase, obj.modulus); 

function add(c, d){   return console.log(this.a + this.b + c + d); }  var obj = {   a: 1,   b: 3 };  add.call(obj, 5, 7);  add.apply(obj, [10, 20]); 

function fn(){   return this.a; }  var g = fn.bind({ a: "azerty" }); console.log(g());   var obj = {   a: 37,   foo: fn,   go: g }; console.log(obj.foo(), obj.go()); 

// 获取文档中的所有元素的列表 var elements = document.getElementsByTagName('*');  for(var i = 0; i < elements.length; i++){   // 当元素被点击时,就会变成蓝色   elements[i].addEventListener('click', function (e) {     e.stopPropagation();     console.log(this);     console.log(e.currentTarget);     console.log(e.target);     // 上面3个值是一样的     this.style.backgroundColor = '#A5D9F3';   }); } 

function f(y,z){     return this.x+y+z;   }   var m = f.bind({x:1},2);   console.log(m(3)); 

  var a = {     b: function() {       var func = function() {         console.log(this.c);       }       func();     },     c: 'hello'   }   a.b();    console.log(a.c);  

 var a = {     b: function() {       var func = function() {         console.log(this.c);       }.bind(this);       func();     },     c: 'hello'   }   a.b();    console.log(a.c); 

function fn(a, b, c) {   return a + b + c; }  var _fn = fn.bind(null, 10); var ans = _fn(20, 30, 40); console.log(ans) 

function fn(a, b, c) {   return a + b + c; }  var _fn = fn.bind(null, 10); var ans = _fn(20, 30); console.log(ans) 

原文始发于:全网最全前端 this指向面试题

主题测试文章,只做测试使用。发布者:酒颂,转转请注明出处:http://www.cxybcw.com/25798.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code