describe方法所在的当前对象是person,this 是如何工

作者: 前端开发  发布:2019-12-05

陷阱:shadowing this

当在三个措施中选拔普通函数时,超轻松忘记前边叁个具有其和谐this(固然其没有必要this)。 由此,你不可能以前端援引该措施的this,因为该this会被屏蔽。 让大家看看现身难题的例证:

var obj = { name: 'Jane', friends: [ 'Tarzan', 'Cheeta' ], loop: function () { 'use strict'; this.friends.forEach( function (friend) { console.log(this.name ' knows ' friend); } ); } }; obj.loop(); // TypeError: Cannot read property 'name' of undefined

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var obj = {
        name: 'Jane',
        friends: [ 'Tarzan', 'Cheeta' ],
        loop: function () {
            'use strict';
            this.friends.forEach(
                function (friend) {
                    console.log(this.name ' knows ' friend);
                }
            );
        }
    };
obj.loop();
// TypeError: Cannot read property 'name' of undefined

在前方的例子中,获取this.name失败,因为函数的this个是undefined,它与措施loop(卡塔尔(英语:State of Qatar)的不如。 有二种方法能够改过this。

修正1: that = this。 将它分配给贰个未有被遮挡的变量(另一个盛行名称是self)并接纳该变量。

loop: function () { 'use strict'; var that = this; this.friends.forEach(function (friend) { console.log(that.name ' knows ' friend); }); }

1
2
3
4
5
6
7
loop: function () {
        'use strict';
        var that = this;
        this.friends.forEach(function (friend) {
            console.log(that.name ' knows ' friend);
        });
    }

修正2: bind(卡塔尔(英语:State of Qatar)。 使用bind(卡塔尔来创制三个this总是指向准确值的函数(在下边包车型大巴例子中该办法的this)。

loop: function () { 'use strict'; this.friends.forEach(function (friend) { console.log(this.name ' knows ' friend); }.bind(this)); }

1
2
3
4
5
6
loop: function () {
     'use strict';
      this.friends.forEach(function (friend) {
          console.log(this.name ' knows ' friend);
    }.bind(this));
}

修正3: forEach的首个参数。 此方法具有第三个参数,this值将作为此值传递给回调函数。

loop: function () { 'use strict'; this.friends.forEach(function (friend) { console.log(this.name ' knows ' friend); }, this); }

1
2
3
4
5
6
loop: function () {
     'use strict';
     this.friends.forEach(function (friend) {
      console.log(this.name ' knows ' friend);
     }, this);
}

把一个隐性参数写成显性地规范传入,代码会显得更加好通晓,何况那样和箭头函数的渴求也很均等:

console.log(this.name);

this 在章程中

在艺术中,相通于古板的面向对象的言语:this指向接受者,方法被调用的靶子。

var obj = { method: function () { console.log(this === obj); // true } } obj.method();

1
2
3
4
5
6
var obj = {
    method: function () {
    console.log(this === obj); // true
}
}
obj.method();

/** Similar to setTimeout() and setImmediate() */
function callIt(func) {
    func();
}

Array.prototype.slice.apply({0:1,length:2})

陷阱:忘记new操作符

譬喻你调用三个布局函数时忘记了new操作符,那么您意料之外市将this用在三个日常性的函数。this会未有正确的值。 在非严苛情势下,this指向window对象,你将开创全局变量:

function Point(x, y) { this.x = x; this.y = y; } var p = Point(7, 5); // 忘记new! console.log(p === undefined卡塔尔; // true // 创设了全局变量: console.log(x卡塔尔国; // 7 console.log(y卡塔尔(قطر‎; // 5

1
2
3
4
5
6
7
8
9
10
function Point(x, y) {
    this.x = x;
    this.y = y;
}
var p = Point(7, 5); // 忘记new!
console.log(p === undefined); // true
 
// 创建了全局变量:
console.log(x); // 7
console.log(y); // 5

侥幸的,在严谨形式下会得到警报(this === undefined):

function Point(x, y) { 'use strict'; this.x = x; this.y = y; } var p = Point(7, 5); // TypeError: Cannot set property 'x' of undefined

1
2
3
4
5
6
7
function Point(x, y) {
    'use strict';
    this.x = x;
    this.y = y;
}
var p = Point(7, 5);
// TypeError: Cannot set property 'x' of undefined

  在实函数中,this 的值是决计于它所处的上下文的格局。

var a = ['a', , 'b'];

this 在 eval() 中

eval() 可以被_直接(通过真正的函数调用)或间接_(通过其余格局)。 详细表达在这里。

设若直接调用evaleval(卡塔尔(قطر‎,则this指向全局对象:``

(0,eval)('this === window') true

1
2
(0,eval)('this === window')
true

要不,如果一向调用eval(卡塔尔国 ,则this与eval(卡塔尔(英语:State of Qatar)的蒙受中保持大器晚成致。 举个例子:

// 普通函数 function sloppyFunc(卡塔尔 { console.log(eval('this'卡塔尔(قطر‎ === window卡塔尔(قطر‎; // true } sloppyFunc(卡塔尔国; function strictFunc(卡塔尔国 { 'use strict'; console.log(eval('this'卡塔尔(قطر‎ === undefined卡塔尔国; // true } strictFunc(卡塔尔; // 布局器 var savedThis; function Constr(卡塔尔 { savedThis = eval('this'卡塔尔国; } var inst = new Constr(卡塔尔国; console.log(savedThis === inst卡塔尔(英语:State of Qatar); // true // 方法 var obj = { method: function (卡塔尔国 { console.log(eval('this'卡塔尔(قطر‎ === obj卡塔尔国; // true } } obj.method(卡塔尔(قطر‎;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 普通函数
function sloppyFunc() {
    console.log(eval('this') === window); // true
}
sloppyFunc();
 
function strictFunc() {
    'use strict';
    console.log(eval('this') === undefined); // true
}
strictFunc();
 
// 构造器
var savedThis;
function Constr() {
     savedThis = eval('this');
}
var inst = new Constr();
console.log(savedThis === inst); // true
 
// 方法
var obj = {
method: function () {
     console.log(eval('this') === obj); // true
}
}
obj.method();

  3、传递到eval(卡塔尔国中的字符串:纵然eval(卡塔尔(英语:State of Qatar)是被直接调用的,this 指的是时下目的;借使eval(卡塔尔是被直接调用的,this 正是指全局对象。

下边代码中,obj.foo先运算再实施,就算值根本未曾变化,this也不再指向obj了。这是因为那个时候它就淡出了运维条件obj,而是在全局遭受举办。

骗局:不科学地领到方法

若果得到格局的值(不是调用它),则能够将该措施转换为函数。 调用该值将产生函数调用,实际不是格局调用。 当将艺术作为函数或方法调用的参数字传送递时,大概会产生这种提取。 实际例子包蕴setTimeout(卡塔尔(英语:State of Qatar)和事件注册管理程序。 小编将利用函数callItt(卡塔尔来模拟此用例:

/**类似setTimeout() 和 setImmediate() */ function callIt(func) { func(); }

1
2
3
4
/**类似setTimeout() 和 setImmediate() */
function callIt(func) {
      func();
}

就算在非严厉方式下把二个艺术作为函数来调用,那么this将本着大局对象并创制全局变量:

var counter = { count: 0, // Sloppy-mode method inc: function () { this.count ; } } callIt(counter.inc); // Didn’t work: console.log(counter.count); // 0 // Instead, a global variable has been created // (NaN is result of applying to undefined): console.log(count); // NaN

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var counter = {
    count: 0,
// Sloppy-mode method
inc: function () {
          this.count ;
    }
  }
 
callIt(counter.inc);
 
// Didn’t work:
console.log(counter.count); // 0
 
// Instead, a global variable has been created
// (NaN is result of applying to undefined):
console.log(count);  // NaN

只要在严刻形式下把一个方法作为函数来调用,this为undefined。 同期会获得一个警戒:

var counter = { count: 0, // Strict-mode method inc: function () { 'use strict'; this.count ; } } callIt(counter.inc); // TypeError: Cannot read property 'count' of undefined console.log(counter.count);

1
2
3
4
5
6
7
8
9
10
11
12
13
var counter = {
        count: 0,
        // Strict-mode method
        inc: function () {
            'use strict';
            this.count ;
        }
    }
 
callIt(counter.inc);
 
// TypeError: Cannot read property 'count' of undefined
console.log(counter.count);

改良方法是行使[bind()](http://speakingjs.com/es5/ch17.html#Function.prototype.bind): The fix is to use bind():

var counter = { count: 0, inc: function () { this.count ; } } callIt(counter.inc.bind(counter)); // 成功了! console.log(counter.count); // 1

1
2
3
4
5
6
7
8
9
10
11
var counter = {
    count: 0,
    inc: function () {
          this.count ;
        }
    }
 
callIt(counter.inc.bind(counter));
 
// 成功了!
console.log(counter.count); // 1

bind(卡塔尔(قطر‎创制了叁个新的函数,它连接采取一个指向性counter的this。

JS中new 操作的达成原理差不离如上面包车型大巴代码所示(纠正确的兑现请看这里,这几个实现也比较复杂一些):

};

与this相关的牢笼

有多个你需求通晓的与this相关的圈套。请在意,在各类状态下,适度从紧情势更安全,因为this在日常函数中为undefined,何况会在产出难题时告诫。

function Point(x, y) {
    'use strict';
    this.x = x;
    this.y = y;
}
var p = Point(7, 5);
// TypeError: Cannot set property 'x' of undefined

bind方法可以解决那个标题,让log方法绑定console对象。

this 在函数中

那是最常用的 this 使用办法,函数通过扮演二种分歧的剧中人物来表示 JavaScript 中的全数可调用构造体:

  • 平常函数(this 在非严厉情势下为全局对象,在从严形式下为undefined)
  • 布局函数(this 指向新创立的实例)
  • 方法(this 是指方法调用的收信人)

在函数中,this 常常被感觉是二个附加的,隐含的参数。

  在章程中this 的用法更赞成于传统的面向对象语言:this 指向的接受方,相当于包蕴有这么些办法的目的。

然则,独有那意气风发种用法(直接在obj对象上调用foo方法),this指向obj;其他用法时,this都照准代码块当前外市对象(浏览器为window对象)。

this 在构造函数中

设若由此new运算符调用函数,则函数将改成布局函数。 该运算符成立四个新的指标,并经过它通过this传递给布局函数:``

var savedThis; function Constr() { savedThis = this; } var inst = new Constr(); console.log(savedThis === inst); // true

1
2
3
4
5
6
var savedThis;
function Constr() {
   savedThis = this;
}
var inst = new Constr();
console.log(savedThis === inst); // true

在JavaScript中贯彻,new运算符大约如下所示(更确切的落实微微复杂一点):

function newOperator(Constr, arrayWithArgs) { var thisValue = Object.create(Constr.prototype); Constr.apply(thisValue, arrayWithArgs); return thisValue; }

1
2
3
4
5
function newOperator(Constr, arrayWithArgs) {
   var thisValue = Object.create(Constr.prototype);
   Constr.apply(thisValue, arrayWithArgs);
   return thisValue;
}

var obj = {
    name: 'Jane',
    friends: [ 'Tarzan', 'Cheeta' ],
    loop: function () {
        'use strict';
        this.friends.forEach(
            function (friend) {
                console.log(this.name ' knows ' friend);
            }
        );
    }
};
obj.loop();
// TypeError: Cannot read property 'name' of undefined

 

Rauschmayer](卡塔尔   译文出处:[众成翻译

woolll]()   

图片 1

在 JavaScript 中,this 这几个新鲜的变量是相持比较复杂的,因为 this 不独有用在面向对象蒙受中,在别的任什么地方方也是可用的。 本篇博文中会解释 this 是哪些行事的以以致用中也许形成难题的地点,最终奉上最好执行。

为了越来越好理解 this,将 this 使用的光景分成三类:

  • 在函数内部 this 叁个外加的,平时是蕴含的参数。
  • 在函数外界(拔尖功用域中): 这指的是浏览器中的全局对象或然Node.js 中八个模块的输出。
  • 在传递给eval(卡塔尔(英语:State of Qatar)的字符串中: eval(卡塔尔(英语:State of Qatar) 也许得到 this 当前值值,或许将其设置为大局对象,决意于 this 是直接调用依旧间接调用。

大家来寻访各种门类。

this 是函数的饱含参数,所以它的值总是同样的。不过你是能够透过动用call(卡塔尔(قطر‎只怕apply(卡塔尔(قطر‎的措施显示地定义好this的值的。

var obj = {

this 在顶级功效域中

在浏览器中,顶层功用域是大局功效域,它指向global object(如window):

console.log(this === window); // true

1
console.log(this === window); // true

在Node.js中,平常在模块中试行代码。 由此,超级功效域是叁个特别的模块成效域

// `global` (不是 `window`卡塔尔国 指全局对象: console.log(Math === global.Math卡塔尔国; // true // `this` 不指向全局对象: console.log(this !== global); // true // `this` refers to a module’s exports: console.log(this === module.exports); // true

1
2
3
4
5
6
7
// `global` (不是 `window`) 指全局对象:
console.log(Math === global.Math); // true
 
// `this` 不指向全局对象:
console.log(this !== global); // true
// `this` refers to a module’s exports:
console.log(this === module.exports); // true

<script>
    console.log(this === window); // true
</script>

name: '李四'

JavaScript 中 this 的运营机制及爬坑指南

2018/03/14 · JavaScript · this

原稿出处: [Dr. Axel

function sloppyFunc() {
    console.log(this === window); // true
}
sloppyFunc();

// Object

this 在普通函数中

在经常函数中,this 的值决议于模式:

  • 非严厉形式: this 是指向大局对象 (在浏览器中为window对象)。
function sloppyFunc() { console.log(this === window); // true }
sloppyFunc();

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6bfd7bd4d414140440-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6bfd7bd4d414140440-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6bfd7bd4d414140440-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6bfd7bd4d414140440-4">
4
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6bfd7bd4d414140440-1" class="crayon-line">
function sloppyFunc() {
</div>
<div id="crayon-5b8f6bfd7bd4d414140440-2" class="crayon-line crayon-striped-line">
    console.log(this === window); // true
</div>
<div id="crayon-5b8f6bfd7bd4d414140440-3" class="crayon-line">
  }
</div>
<div id="crayon-5b8f6bfd7bd4d414140440-4" class="crayon-line crayon-striped-line">
sloppyFunc();
</div>
</div></td>
</tr>
</tbody>
</table>
  • 严峻方式: this 的值为 undefined。
function strictFunc() { 'use strict'; console.log(this ===
undefined); // true } strictFunc();

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6bfd7bd58954780524-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6bfd7bd58954780524-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6bfd7bd58954780524-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6bfd7bd58954780524-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6bfd7bd58954780524-5">
5
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6bfd7bd58954780524-1" class="crayon-line">
function strictFunc() {
</div>
<div id="crayon-5b8f6bfd7bd58954780524-2" class="crayon-line crayon-striped-line">
   'use strict';
</div>
<div id="crayon-5b8f6bfd7bd58954780524-3" class="crayon-line">
   console.log(this === undefined); // true
</div>
<div id="crayon-5b8f6bfd7bd58954780524-4" class="crayon-line crayon-striped-line">
}
</div>
<div id="crayon-5b8f6bfd7bd58954780524-5" class="crayon-line">
strictFunc();
</div>
</div></td>
</tr>
</tbody>
</table>

约等于说,this 是八个设定了暗中认可值(window或undefined)的隐式参数。 可是,能够由此 call(卡塔尔国 或 apply(卡塔尔(قطر‎ 进行函数调用,并通晓钦定this的值:``

function func(arg1, arg2) { console.log(this); // a console.log(arg1); // b console.log(arg2); // c } func.call('a', 'b', 'c'); // (this, arg1, arg2) func.apply('a', ['b', 'c']); // (this, arrayWithArgs)

1
2
3
4
5
6
7
function func(arg1, arg2) {
        console.log(this); // a
        console.log(arg1); // b
        console.log(arg2); // c
    }
func.call('a', 'b', 'c'); // (this, arg1, arg2)
func.apply('a', ['b', 'c']); // (this, arrayWithArgs)

5、最棒奉行

// [undefined]

至上施行

从概念上讲,小编以为普通函数未有它协和的this,况兼想到上述修复是为了维持这种主见。 ECMAScript 6透过[箭头函数](http://2ality.com/二〇一三/04/arrow-functions.html)补助这种艺术 – 未有它们自身的this。 在这里样的函数里面,你可以随意使用this,因为不会被挡住:

loop: function () { 'use strict'; // The parameter of forEach() is an arrow function this.friends.forEach(friend => { // `this` is loop’s `this` console.log(this.name ' knows ' friend); }); }

1
2
3
4
5
6
7
8
loop: function () {
    'use strict';
     // The parameter of forEach() is an arrow function
    this.friends.forEach(friend => {
     // `this` is loop’s `this`
     console.log(this.name ' knows ' friend);
     });
}

自己不赏识使用this作为平时函数的增大参数的API:

beforeEach(function () { this.addMatchers({ toBeInRange: function (start, end) { ... } }); });

1
2
3
4
5
6
7
beforeEach(function () {  
   this.addMatchers({  
   toBeInRange: function (start, end) {  
    ...
    }  
   });  
});

将如此的包括参数造成名扬天下的参数使得业务更是扎眼,而且与箭头函数宽容。

beforeEach(api => { api.addMatchers({ toBeInRange(start, end) { ... } }); });

1
2
3
4
5
6
7
beforeEach(api => {
   api.addMatchers({
    toBeInRange(start, end) {
       ...
     }
  });
});

JavaScript 浏览器 HTTP HTML ECMAScript 6


1 赞 2 收藏 评论

图片 2

要依赖this 所在的职责来精通它,情形大要能够分为3种:

}();

 4、与this有关的骗局

obj.print()

function strictFunc() {
    'use strict';
    console.log(eval('this') === undefined); // true
}
strictFunc();

call的第贰个参数正是this所要指向的相当指标,后边的参数则是函数调用时所需的参数。

var obj = {
    method: function () {
        console.log(this === obj); // true
    }
}
obj.method();

A.describe() // "姓名:张三"

若是你是在Sloppy方式下将多个办法充当函数来调用,*this*针对的正是全局对象,所以事后创制的都会是大局的变量。

callback();

  当您在章程中运用函数的时候,平时会忽视了函数是有温馨的this 的。那个this 又差距方法,由此你不能够把那三个this 混在联合签名利用。具体的请看上边这段代码:

 

2、功效域中的this

}.bind(this));

  在浏览器中,效率域便是全局作用域,this 指的正是以此全局对象(就如window):

 

  2、在函数外(超级成效域中):在浏览器中this 指的是大局对象;在Node.js中指的是模块(module卡塔尔的导出(exports卡塔尔。

缓和形式正是利用bind方法,将counter.inc绑定counter。

  1、that=this,将this 赋值到一个变量上,那样就把this 显性地显现出来了(除了that,self 也是个很宽泛的用于存放this的变量名),之后就应用特别变量:

// 情况三

生龙活虎旦您是在Strict形式下那样做的话,this是undefined的,你要么得不到想要的结果,然而起码你会收获一句警报:

inc: function () {

复制代码 代码如下:

this.count ;

复制代码 代码如下:

}

复制代码 代码如下:

 

复制代码 代码如下:

var n = 123;

反对上,笔者以为实函数并从未归属自身的this,而上述的缓慢解决方案也是依照这么些观念的。ECMAScript 6是用箭头函数(arrow function卡塔尔国来贯彻那些功用的,箭头函数正是未有和谐的this 的函数。在这里样的函数中您能够随意采纳this,也不用顾虑有未有隐式的留存。

return this.p;

// `global` (not `window`) refers to global object:
console.log(Math === global.Math); // true

};

var counter = {
    count: 0,
    // Strict-mode method
    inc: function () {
        'use strict';
        this.count ;
    }
}
callIt(counter.inc);

1.含义

// Real functions
function sloppyFunc() {
    console.log(eval('this') === window); // true
}
sloppyFunc();

3)转变相像数组的指标

1.2  结构器中的this

}

2、bind(卡塔尔国。使用bind(卡塔尔来创制一个函数,那些函数的this 总是存有您想要传递的值(上边这一个事例中,方法的this):

上面代码中,bind方法除了绑定this对象,还将add函数的首先个参数x绑定成5,然后重返二个新函数newAdd,那些函数只要再承当八个参数y就能够运维了。

复制代码 代码如下:

name: '张三',

复制代码 代码如下:

var d = new Date();

4.2 不妥帖地选取方法

var add = function (x, y) {

  1、在函数中:this 平日是三个包涵的参数。

// 张三

复制代码 代码如下:

 

loop: function () {
    'use strict';
    var that = this;
    this.friends.forEach(function (friend) {
        console.log(that.name ' knows ' friend);
    });
}

function a() {

// Instead, a global variable has been created
// (NaN is result of applying to undefined):
console.log(count);  // NaN

f() === this // true

  eval(卡塔尔能够被直接(通过调用那么些函数名'eval')或然直接(通过别的艺术调用,比如call(卡塔尔国)地调用。要打听更加多细节,请看这里。

})()

复制代码 代码如下:

describe: f

    实函数
    构造器
    方法

函数实例的call方法,能够钦命函数内部this的针对性(即函数实行时所在的效用域),然后在所钦定的效益域中,调用该函数

复制代码 代码如下:

console.log(this);

  函数基本能够表示JS中全部可被调用的布局,所以那是也最不乏先例的施用this 的光景,而函数又能被子分为下列三种角色:

var print = d.getTime;

3、eval()中的this

数组的map和foreach方法,允许提供叁个函数作为参数。那么些函数内部不应有利用this。

  你能够经过new 将叁个函数当作一个协会器来使用。new 操作创建了四个新的指标,并将以此目的通过this 传入布局器中。

callIt(counter.inc.bind(counter));

function newOperator(Constr, arrayWithArgs) {
    var thisValue = Object.create(Constr.prototype);
    Constr.apply(thisValue, arrayWithArgs);
    return thisValue;
}

// 情况二

function strictFunc() {
    'use strict';
    console.log(this === undefined); // true
}
strictFunc();

// 情况一

复制代码 代码如下:

}

  假设你直接获得二个措施的值(不是调用它),你就是把那些艺术当作函数在用。当您要将一个方式当作一个参数字传送入四个函数大概四个调用方法中,你很可能会这么做。setTimeout(卡塔尔(英语:State of Qatar)和注册事件句柄(event handlers)便是这种情况。笔者将会动用callIt(卡塔尔方法来模拟这一个场景:

除此以外,利用数组对象的slice方法,能够将二个像样数组的目的(比方arguments对象)转为真正的数组。

bind(卡塔尔(قطر‎更创办了二个三番五次能将this的值设置为counter 的函数。

};

// Methods
var obj = {
    method: function () {
        console.log(eval('this') === obj); // true
    }
}
obj.method();

var person = {

复制代码 代码如下:

console.log(this);

1.3  方法中的this

}

在Node.js中,你平淡无奇都以在module中实践函数的。因而,一流作用域是个很非常的模块功效域(module scope):

蓬蓬勃勃经某些方法坐落于多层对象的中间,这个时候this只是指向当前少年老成层的目的,而不会持续更上边包车型客车层。

复制代码 代码如下:

几个消除办法是在其次层改用二个指向性外层this的变量。

可是若是采纳的是strict形式,那你依然会获得警告(this===undefined):

m: function() {

var counter = {
    count: 0,
    // Sloppy-mode method
    inc: function () {
        this.count ;
    }
}
callIt(counter.inc);

1)全局情况

  对这多少个分类,我们做了相应的测量试验:
  1、在函数中的this

}

  4.3 隐藏this

name: '李四',

// TypeError: Cannot read property 'count' of undefined
console.log(counter.count);

obj.foo() // obj

复制代码 代码如下:

(obj.foo = function () {

beforeEach(api => {
    api.addMatchers({
        toBeInRange(start, end) {
            ...
        }
    });
});

describe: function () {

var savedThis;
function Constr() {
    savedThis = this;
}
var inst = new Constr();
console.log(savedThis === inst); // true

};

复制代码 代码如下:

// [1, undefined]

function Point(x, y) {
    this.x = x;
    this.y = y;
}
var p = Point(7, 5); // we forgot new!
console.log(p === undefined); // true

Array.prototype.slice.apply({0:1})

Strict模式:this 的值是undefined。

}

所在的岗位来精晓它,景况概况能够分为3种: 1、在函数中:this 常常是二个包罗的参数。 2、在函数外(一级成效域中):在浏...

地点代码的apply方法的参数都以指标,可是回去结果都是数组,那就起到了将指标转成数组的目标。从地方代码能够看来,这么些艺术起成效的前提是,被管理的靶子必需有length属性,以致相呼应的数字键。

复制代码 代码如下:

var print = d.getTime.bind(d);

复制代码 代码如下:

describe: function () {

复制代码 代码如下:

上面代码中,this.name表示describe方法所在的一时指标的name属性。调用person.describe方法时,describe方法所在的近期指标是person,所以正是调用person.name。

复制代码 代码如下:

o.p // "Hello World!"

// Didn't work:
console.log(counter.count); // 0

b: {

  你要小心上面将介绍的3个和this 有关的陷阱。要在乎,在底下的例证中,使用Strict格局(strict mode卡塔尔国都能增强代码的安全性。由于在实函数中,this 的值是undefined,当现身难点的时候,你会得到警报。

p: 'Hello'

loop: function () {
    'use strict';
    this.friends.forEach(function (friend) {
        console.log(this.name ' knows ' friend);
    }, this);
}

return '姓名:' this.name;

// Constructors
var savedThis;
function Constr() {
    savedThis = eval('this');
}
var inst = new Constr();
console.log(savedThis === inst); // true

 

复制代码 代码如下:

Array.apply(null, ["a",,"b"])

本身恨恶有个别API把this 充当实函数的一个附加参数:

B.describe() // "姓名:李四"

  Sloppy形式:this 指的是大局对象(在浏览器中正是window)。

2)制止数组管理方法中的this

  1.1  在实函数中的this

// 张三

复制代码 代码如下:

};

下面的事例里函数中的this.name 无法动用,因为函数的this 的值是undefined,那和办法loop(卡塔尔(英语:State of Qatar)中的this 差别样。上边提供了两种思路来化解那一个主题素材:

}();

  4.1  忘记行使new

m: function() {

loop: function () {
    'use strict';
    this.friends.forEach(function (friend) {
        console.log(this.name ' knows ' friend);
    }.bind(this));
}

// undefined a1

  若是你不是利用new来调用布局器,那实在您就是在选用二个实函数。因而this就不会是你预期的值。在Sloppy情势中,this 指向的就是window 而你将会成立全局变量:

B.describe = A.describe;

3、用forEach的第一个参数。forEach的第4个参数会被传播回调函数中,作为回调函数的this 来使用。

(1, function () {

// Global variables have been created:
console.log(x); // 7
console.log(y); // 5

(function () {

beforeEach(function () { 
    this.addMatchers({ 
        toBeInRange: function (start, end) { 
            ...
        } 
    }); 
});

 

var counter = {
    count: 0,
    inc: function () {
        this.count ;
    }
}
callIt(counter.inc.bind(counter));
// It worked!
console.log(counter.count); // 1

}

function func(arg1, arg2) {
    console.log(this); // 1
    console.log(arg1); // 2
    console.log(arg2); // 3
}
func.call(1, 2, 3); // (this, arg1, arg2)
func.apply(1, [2, 3]); // (this, arrayWithArgs)

// a

复制代码 代码如下:

// b

loop: function () {
    'use strict';
    // The parameter of forEach() is an arrow function
    this.friends.forEach(friend => {
        // `this` is loop's `this`
        console.log(this.name ' knows ' friend);
    });
}

return x y;

复制代码 代码如下:

// "姓名:张三"

要想赢得预期的结果,能够运用bind(卡塔尔(قطر‎:

1)寻找数组最大因素

// `this` doesn't refer to the global object:
console.log(this !== global); // true
// `this` refers to a module's exports:
console.log(this === module.exports); // true

function f(x,y){

p: 'Hello',

上边代码中,a函数中的this关键字,若是指向全局对象,重返结果为123。即便使用call方法将this关键字指向obj对象,再次来到结果为456。能够看到,即便call方法未有参数,大概参数为null或undefined,则相通指向全局对象。

 

describe: f

上面代码中,函数f内部选用了this关键字,随着f所在的目的差别,this的针对性也不一致。

var plus5 = add.bind(null, 5);

n: 2

}

2.施用项所

// Window

 

var Obj = function (p) {

foo: function () {

var a = [10, 2, 4, 15, 9];

var obj ={

a.forEach(print)

this.times.forEach(function (n) {

bind比call方法和apply方法更进一层的是,除了绑定this以外,还足以绑定原函数的参数。

 

本文由巴黎人游戏官网发布于前端开发,转载请注明出处:describe方法所在的当前对象是person,this 是如何工

关键词: