一、this是什么东东?

this是指包含它的函数作为方法被调用时所属的对象。这句话理解起来跟卵一样看不懂,但是如果你把它拆分开来变成这三句话后就好理解一点了。

1.包含它的函数

2.作为方法被调用时

3.所属的对象

二、this的绑定规则

1、默认绑定

var x = 0;function num(){ this.x = 1;}珍珠泉9号console.log(this.x);//0num();console.log(this.x);//1  

当没有使用let或者var时,声明的变量是全局变量,指向windo茶浴炉w,

在这一形态下,其函数内部的this是与全局作用域时一样,直接指向window陈秋实蔡照,执行完num()后,更改了x的值,所以其形态 依然等价于window。

function foo(){      console.log(this.a)    }    var a = 2;    foo(); //2    console.log(this.document === document); // true    // 在浏览器中,全局对象为 window 对象:    consol鼎丰真e.log(this === window); // true    this.a = 3;    console.log(win妖艳皇后dow.a); // 3

this指向全局对象。在非严格模式中,当funcion被不带任何修饰的函数直接引用进行调用的,只能使用默认绑定,无法应用其他规则。

2、隐式绑定

先看两段例子

f黑暗史诗4中文版unction foo(){ console.log(this.a)}var obj = { a:2, foo:foo}obj.foo() //2

隐式绑定————调用位置使用obj上下文来引缙云游戏中心用函数,可以说函数被调用时obj对象“拥有”或者“包含”它,它就指向谁。

function foo(){ console.log(this.a)}var obj2 = { a:42, foo:foo}var obj1 = {   a:2,   obj2:obj2,   foo:foo}obj1.foo() //2obj1.obj2.foo() //42

此时可以控地下城堡2奥杜因假面制台查看obj1,obj2对象里究竟包含了什么。

当函数引用有上下文对象时,隐式绑定放飞坚强规则会把函数调用中的this绑定到这李馨露个上下文对象。

对象属性引用链中只有最后一层在调用位置中起作用。

身为前端老司机,东游国旅 女装山脉续作 长沙华文森林酒店还是得分享些干货精品学习资料的,前端资料获取方式:

1.在你手机的右上角有【关注】选项,点击关注!

2.关注后,手机客户端点击我的主页面,右上角有私信,请私信回复:【学习】

已经设置好了关键词自动回复,所以回复的时候请注意关键词哟~

下面思考这一段会输出什么呢?

functi金康安泰on foo(){ console.log(this.a)}var obj = { a:2, foo:foo}var bar = obj.foo; //这里bar将引用foo函数本身,所以不带有函数对象的上下文,this会直接指向windowbar() //?

为什么没有隐式绑定?这种情况称为隐式丢失。

因为bar=obj.foo 而obj.太平洋英雄2攻略foo指向foo 也就是bar = function foo(){console.log(this.a)} foo中的this指向window,在window中并没有对a进行定义,so,结果是undefined

接下来再看一段会是什么结果呢?(参数传递时的隐式赋值)

function foo(){ console.log(this.a)}function doback(fn){ fn()}var obj = { a:2, foo:foo}var a = 'global';doback(obj.foo) //? 显然答案是glo天上掉下个打工妹bal,但是为什么呢?请继续往下看!

隐式丢失--被隐式绑定的函数会丢失绑定对象然后应用默认绑定。

最后函数执行 doback(obj.foo)时,会进行参数传递,也就是 fn = obj.foo,就和上一个例子一样了。既this指向的是window。

3、显示绑定

function foo(){ console.log(this.a)}var obj = { a:2}foo.call(obj) //2

显式绑定--第一个参数是一个对象,接着在调用函数时将其绑定到this,通过foo.call(obj),我们可以在调用foo时强制把他的this绑定到obj上。

function foo(){ console.log(this.a)}var obj = { a:2}var钮钴禄伊兰 a = '3333333';va马加华r bar = function(){ foo.call(obj)}bar() // 2bar.call(傅汉思window) //2

硬绑定后bar无论怎么调用,都不会影响foo函数的this绑定。

通过创建函数bar(),并在内部调用foo.call(obj),强制把foo的this绑定到obj上。硬绑定的bar之后无论如何调用函数,都只会在obj上调用foo。

我们来看一下他的应用:

funct姚纪娜ion foo(num) { console.log( this.a, num); return this.a + num;}var obj = { a: 2};var bar = function() { return foo.call( obj, ...arguments ); // 将obj对象硬编码进去   //return foo.apply( obj, arguments ); // 也可以使用apply将obj对象硬编码进去};var b = bar( 3 ); // 2 3console.log( b ); // 5
function fn1(){ cok1286nsole.log(1);}function fn2(){ console.log(2);}fn1.call(fn2); //输出 1 fn1.call.call(fn2); //输出 2

4、new绑定

我们不去深入了解构造函数,但要知道new来调用函数,或者说发生构造函数调用时,执行了哪些

当代码 new foo(...) 执行时:

(1) 创建一个新对象,它继承自foo.prototype.

(2) 将构造函数的作用域赋给新对象(因此 this 就指向了这个新对象);new foo 等同于 new foo(),只能用在不传递任何参数的情况。

(3) 执行构造函数中的代码(为这个新对象添加属性) ;

(4) 返回新对象, 那么这个对象会取代整个new出来的结果。如果构造函数没有返回对象,那么new出来的结果为步骤1创建的对象。

function foo(a){ this.a = a;}var bar = new foo(2); //创建一个新对象bar,它继承了foo.prototype. 也就是bar这个对象有a这个属性,且传进去的是2,使用new来调用foo(..)时,会构造一个新对象,并把它绑定到foo(..)调用中徽府茶行的this上console.log(bar.a) //2