this的用法(二)-箭头函数+面试题

箭头函数与普通函数的this

严格模式下的普通函数this为undenfied,非严格模式是window;箭头函数的this是定义时所在的this

箭头函数this指向注意事项

箭头函数体内的this对象,如果包裹在函数中就是函数调用时所在的对象,如果放在全局中就是指全局对象window。并且固定不会更改。换句话说内部的this就是外层代码块的this

下面是对比分析普通函数和箭头函数中this区别

// 普通函数
function foo() {
  setTimeout(function() {
    console.log(‘id:‘, this.id);
  });
}

var id = 21;
foo.call({ id: 42 }); //21
//注意定时器,此时this指向window
// 箭头函数
function foo() {
  setTimeout(() => {
    console.log(‘id:‘, this.id);
  }, 100);
}

var id = 21;
foo.call({ id: 42 }); //42
// 上面的匿名函数定义时所在的执行环境就是foo函数,所以匿名
//函数内部的this执向始终会和foo函数的this执向保持一致,不会更改,如同下面的这个案例
function foo() {
  setTimeout(() => {
    console.log(‘id:‘, this.id);
  }, 100);
}

var id = 21;
foo(); //21(没有用call)

如果不使用 ES6,那么这种方式应该是最简单的不会出错的方式了,我们是==先将调用这个函数的对象保存在变量 _this== 中,然后在函数中都使用这个 _this,这样 _this 就不会改变了。

var name = "windowsName";
var a = {
 name : "Cherry",
 func1: function () {
  console.log(this.name)
 },
 func2: function () {
  var _this = this;
  setTimeout( function() {
   _this.func1()
  },100);
 }
};
a.func2()  // Cherry

这个例子中,在 func2 中,首先设置 var _this = this;,这里的 this 是调用 func2 的对象 a,为了防止在 func2 中的 setTimeout 被 window 调用而导致的在 setTimeout 中的 this 为 window。我们将 this(指向变量 a) 赋值给一个变量 _this,这样,在 func2 中我们使用 _this 就是指向对象 a 了。

call的作用就是将foo函数的执行环境从window改成对象{id: 42}

==定时器==的作用就是延迟执行当前函数的外部执行环境,无论有没有设置延迟时间

普通函数解释:定义时this指向函数foo作用域,==但是在定时器100毫秒之后执行函数时,此时this指向window对象==

箭头函数解释:this始终指向定义时所在对象,也就是始终指向foo作用域

进一步分析this

var handler = {
  id: ‘123456‘,

  init: function() {
    document.addEventListener(‘click‘,
      event => this.doSomething(event.type), false);
  },

  doSomething: function(type) {
    console.log(‘Handling ‘ + type  + ‘ for ‘ + this.id);
  }
};
handler.init()// Handlingclickfor123456

箭头函数的this始终指向handler,如果是普通函数,this指向document

this指向的固定化,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this。正是因为它没有this,所以也就不能用作构造函数。

面试题

下面的面试题一、二、四都设计到引用问题,如果不是很好理解还可以理解成在 es5 中,永远是this 永远指向最后调用它的那个对象。

面试题一

this.x = 9;    // this refers to global "window" object here in the browser
var module = {
  x: 81,
  getX: function() { return this.x; }
};

module.getX(); // 81

var retrieveX = module.getX;
retrieveX();
// returns 9 - The function gets invoked at the global scope

// Create a new function with ‘this‘ bound to module
// New programmers might confuse the
// global var x with module‘s property x
var boundGetX = retrieveX.bind(module);
boundGetX(); // 81

retrieveX只是getX函数的引用,也就是只是getX的一个指针(getX的另一个指针是module.getX),所以retrieveX还是指向getX函数本身的

和上面类似的案例,下面的func只是函数引用,所以即使在函数内部,还是执行的函数本身,不受词法作用域限制(箭头函数则受限制)

document.getElementById( ‘div1‘ ).onclick = function(){
    console.log( this.id );// 输出: div1
    var func = function(){
        console.log ( this.id );// 输出: undefined
    }
    func();
};
//修正后
document.getElementById( ‘div1‘ ).onclick = function(){
    var func = function(){
        console.log ( this.id );// 输出: div1
    }
    func.call(this);
};
function foo() {
    console.log( this.a );
}

var a = 2;
var o = { a: 3, foo: foo };
var p = { a: 4 };

o.foo(); // 3
(p.foo = o.foo)(); // 2

面试题二

var A = function( name ){
    this.name = name;
};
var B = function(){
    A.apply(this,arguments);
};
B.prototype.getName = function(){
    return this.name;
};
var b=new B(‘sven‘);
console.log( b.getName() ); // 输出:  ‘sven‘

面试题三

确实,许多包中的函数,和许多在JavaScript语言以及宿主环境中的内建函数,都提供一个可选参数,通常称为“环境(context)”,这种设计作为一种替代方案来确保你的回调函数使用特定的this而不必非得使用bind(..)。

举例来说:

function foo(el) {
    console.log( el, this.id );
}

var obj = {
    id: "awesome"
};

// 使用`obj`作为`this`来调用`foo(..)`
[1, 2, 3].forEach( foo, obj ); // 1 awesome  2 awesome  3 awesome

面试题四

明确绑定 的优先权要高于 隐含绑定

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

var obj1 = {
    a: 2,
    foo: foo
};

var obj2 = {
    a: 3,
    foo: foo
};

obj1.foo(); // 2
obj2.foo(); // 3

obj1.foo.call( obj2 ); // 3
obj2.foo.call( obj1 ); // 2

new绑定的优先级高于隐含绑定(new和call/apply不能同时使用,所以new foo.call(obj1)是不允许的,也就是不能直接对比测试 new绑定 和 明确绑定)

原文地址:https://www.cnblogs.com/chaimi/p/10259245.html

时间: 01-11

this的用法(二)-箭头函数+面试题的相关文章

ES6 => 箭头函数

箭头函数ES6一个非常有用的新特性,我这里小小的总结一下用法: 箭头函数相当于直接return一个值,当没有参数时,可以这么写: var f = () => 0; // 上面这句话相当于 var f = function(){ return 0;} 当有一个参数时: var f = num => return num; // 上面这一句相当于 var f = function(num) { return num;} 当有两个或以上的参数时,要用括号并用逗号分隔开: var f = (a,b)

箭头函数和Buffer对象

一.箭头函数 普通函数1 var add = function (a, b) { return a + b; } 普通函数2 function add (a, b) { return a + b; } 箭头函数 var add = (a, b) => a + b; 如果函数内部只有一句返回值,连return都不用写了,如果里面执行的语句比较多,就用{ }括起来 var add = (a, b)=> { console.log("这是箭头函数"); return a + b;

深入理解this机制系列第三篇——箭头函数

× 目录 [1]痛点 [2]解决 [3]基本用法[4]回调函数[5]注意事项 前面的话 this机制与函数调用有关,而作用域则与函数定义有关.有没有什么是可以将this机制和作用域联系起来的呢?本文将介绍ES6新增的内容——箭头函数 痛点 对于闭包的痛点在于,闭包的this默认绑定到window对象,但又常常需要访问嵌套函数的this,所以常常在嵌套函数中使用var that = this,然后在闭包中使用that替代this,使用作用域查找的方法来找到嵌套函数的this值 var a = 0;

ECMAScript6箭头函数ArrowFunction"=>"

一.说明 ECMAScript6可以用箭头"=>"定义函数.x => x * x或(x) => {return x * x;}与匿名函数function(x){return x * x;}相等. 二.示例 2.1 没有参数的箭头函数 var f = () => 9; console.log(f()); //9 2.2 一个参数的箭头函数 var f = x => x * x; console.log(f(3)); //9 var f = x => {

JS中generater和箭头函数

generater跟函数很像: function* fn(x){ yield x; yield x++; return x;} 如上所示,generater用function*定义,可以用yield返回多次,也可以使用return返回; 调用generater有两个方法,一是一直调用generater的next()方法: console.log(fn.next()); console.log(fn.next()); console.log(fn.next()); 直到fn.next()返回tru

C++沉思录之二——虚函数使用的时机

虚函数使用的时机 为什么虚函数不总是适用? 1. 虚函数有事会带来很大的消耗: 2. 虚函数不总是提供所需的行为: 3. 当我们不考虑继承当前类时,不必使用虚函数. 必须使用虚函数的情况: 1. 当你想删除一个表面上指向基类对象,实际却是指向派生类对象的指针,就需要虚析构函数. C++沉思录之二--虚函数使用的时机,布布扣,bubuko.com

es6箭头函数

1.先来看看es6对函数做了什么:默认值! function add(a=1,b=2) {//默认值 console.log(a+b) } add(5,6); let a=0; if(a==0){ // throw new Error('错误')//手动报错 } //console.log(add.length)//如果给了默认值,那就不计算在必要参数里,也就是得到0了 //好奇的朋友可以打开注释试一试,这个默认参数和必要参数不一样哦,不给默认值的为必要参数,是你必须要传入的,给了默认值的就不用

ES6的箭头函数详解:

箭头函数是ES6中新增一个函数表达形式,它是对函数的一种简化ES6允许使用"箭头"(=>)定义函数. Eg: var f = v => v; 等同于之前 var f = function(v) { return v; }; const Even = n => n % 2 == 0; const Square = n => n * n; 注: 箭头函数就是省略了function 参数集与函数体之间一定要有一个箭头=> 对于参数集而言: 零个参数用 () 表示

箭头函数

在ES6以前我们用 function 来定义函数,还记得楼主刚学js那会儿老是把function写错 (╯‵□′)╯︵┻━┻,但是自从ES6中出现了箭头函数以后,妈妈再也不担心我写成 fnuction了,那么我们下面开始正式学习! 基本语法: ES6允许使用"箭头"(=>)定义函数. let func = (num) => num; 上面的箭头函数等同于: let func = function (num) { return num; } 小伙伴们发现了什么?没错, ES6

ES6新特性(函数默认参数,箭头函数)

ES6新特性之 函数参数的默认值写法 和 箭头函数. 1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式:   从上面的代码可以看出存在一个问题,当传入的参数为0或者false时,会直接取到后面的值,而不是传入的这个参数值. 那怎么解决呢?对于上图的代码,可以通过判断是否传入了num参数,没有就用默认值:   这种做法还是很麻烦的,而ES6则直接在参数定义里面设置函数参数的默认值,而且不用担心传入参数是0或者false会出错了: 2.箭头函数 箭头函数用 =>