xml地图|网站地图|网站标签 [设为首页] [加入收藏]

工作原理

来源:http://www.ccidsi.com 作者:最新解决方案 人气:147 发布时间:2019-05-02
摘要:JavaScript 的 this 原理 2018/06/19 · JavaScript· this 原稿出处:阮一峰    1.含义 ①、难题的缘故 1、难点的原委 学懂 JavaScript 语言,一个注明正是领会下边二种写法,或者有不一样等的结果

JavaScript 的 this 原理

2018/06/19 · JavaScript · this

原稿出处: 阮一峰   

1.含义

①、难题的缘故

1、难点的原委

学懂 JavaScript 语言,一个注明正是领会下边二种写法,或者有不一样等的结果。

var obj = { foo: function () {} }; var foo = obj.foo; // 写法一 obj.foo() // 写法二 foo()

1
2
3
4
5
6
7
8
9
10
11
var obj = {
  foo: function () {}
};
 
var foo = obj.foo;
 
// 写法一
obj.foo()
 
// 写法二
foo()

地点代码中,固然obj.foofoo针对同一个函数,可是实行结果或者不一致。请看上面包车型大巴事例。

var obj = { foo: function () { console.log(this.bar) }, bar: 1 }; var foo = obj.foo; var bar = 2; obj.foo() // 1 foo() // 2

1
2
3
4
5
6
7
8
9
10
var obj = {
  foo: function () { console.log(this.bar) },
  bar: 1
};
 
var foo = obj.foo;
var bar = 2;
 
obj.foo() // 1
foo() // 2

那种反差的缘由,就在于函数体内部选取了this首要字。大多教科书会告诉您,this指的是函数运维时所在的碰着。对于obj.foo()来说,foo运行在obj环境,所以this指向obj;对于foo()来说,foo运作在全局景况,所以this针对全局境况。所以,两者的运维结果不雷同。

那种解释没错,不过教科书往往不告诉您,为啥会这么?也正是说,函数的运作碰到到底是怎么调节的?举个例子来讲,为啥obj.foo()就是在obj条件进行,而只要var foo = obj.foofoo()就改为在全局意况实行?

本文就来解说 JavaScript 这样管理的法则。了然了那一点,你就能够透彻领悟this的作用。

this关键字是3个充裕主要的语法点。首先,this总是回到三个目的,轻易说,正是回去属性或艺术“当前”所在的对象。

学懂 JavaScript 语言,三个标记就是精晓上面三种写法,大概有不一致的结果。

贰、内部存款和储蓄器的数据结构

JavaScript 语言之所以有this的安顿性,跟内部存款和储蓄器里面包车型地铁数据结构有涉嫌。

var obj = { foo: 5 };

1
var obj = { foo:  5 };

上边的代码将2个对象赋值给变量obj。JavaScript 引擎会先在内部存款和储蓄器里面,生成多少个对象{ foo: 5 },然后把那些目的的内存地址赋值给变量obj

图片 1

也正是说,变量obj是二个地方(reference)。后边假诺要读取obj.foo,引擎先从obj获得内部存款和储蓄器地址,然后再从该地址读出原本的目标,再次回到它的foo属性。

本来的靶子以字典结构保留,每5脾性质名都对应一脾气质描述对象。比释尊讲,上边例子的foo天性,实际上是以下边包车型大巴款型保留的。

图片 2

{ foo: { [[value]]: 5 [[writable]]: true [[enumerable]]: true [[configurable]]: true } }

1
2
3
4
5
6
7
8
{
  foo: {
    [[value]]: 5
    [[writable]]: true
    [[enumerable]]: true
    [[configurable]]: true
  }
}

注意,foo天性的值保存在属性描述对象的value质量之中。

this.property // this就代表property属性当前所在的靶子。

var obj = {
 foo: function () {}
};
var foo = obj.foo;
// 写法一
obj.foo()
// 写法二
foo()

三、函数

这么的构造是很鲜明的,难题在于属性的值大概是三个函数。

var obj = { foo: function () {} };

1
var obj = { foo: function () {} };

那会儿,引擎会将函数单独保存在内部存款和储蓄器中,然后再将函数的地址赋值给foo属性的value属性。

图片 3

{ foo: { [[value]]: 函数的地址 ... } }

1
2
3
4
5
6
{
  foo: {
    [[value]]: 函数的地址
    ...
  }
}

由于函数是一个独自的值,所以它能够在不相同的遇到(上下文)推行。

var f = function () {}; var obj = { f: f }; // 单独实行 f() // obj 境况实行 obj.f()

1
2
3
4
5
6
7
8
var f = function () {};
var obj = { f: f };
 
// 单独执行
f()
 
// obj 环境执行
obj.f()

var person = {

地点代码中,纵然obj.foo和foo指向同3个函数,可是进行结果恐怕不等同。请看上面包车型客车例子。

4、遇到变量

JavaScript 允许在函数体内部,引用当前意况的其余变量。

var f = function () { console.log(x); };

1
2
3
var f = function () {
  console.log(x);
};

下面代码中,函数体里面使用了变量x。该变量由运转条件提供。

未来难点就来了,由于函数能够在分歧的运行情形实行,所以必要有壹种机制,能够在函数体内部得到当前的运作情状(context)。所以,this就涌出了,它的统一筹算目标正是在函数体内部,指代函数当前的周转条件。

var f = function () { console.log(this.x); }

1
2
3
var f = function () {
  console.log(this.x);
}

上边代码中,函数体里面包车型客车this.x正是指当前运作条件的x

var f = function () { console.log(this.x); } var x = 一; var obj = { f: f, x: 二, }; // 单独实行 f() // 一 // obj 意况实行 obj.f() // 二

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var f = function () {
  console.log(this.x);
}
 
var x = 1;
var obj = {
  f: f,
  x: 2,
};
 
// 单独执行
f() // 1
 
// obj 环境执行
obj.f() // 2

地点代码中,函数f在大局景况进行,this.x本着全局遇到的x

图片 4

obj条件进行,this.x指向obj.x

图片 5

再次回到本文起始提议的主题材料,obj.foo()是通过obj找到foo,所以正是在obj遇到进行。1旦var foo = obj.foo,变量foo就一向指向函数自个儿,所以foo()就变成在大局蒙受进行。

1 赞 4 收藏 评论

图片 6

name: '张三',

var obj = {
 foo: function () { console.log(this.bar) },
 bar: 1
};
var foo = obj.foo;
var bar = 2;
obj.foo() // 1
foo() // 2

describe: function () {

那种差距的案由,就在于函数体内部选拔了this关键字。诸多教材会告知你,this指的是函数运转时所在的条件。对于obj.foo()来说,foo运维在obj蒙受,所以this指向obj;对于foo()来讲,foo运维在大局遭逢,所以this指向全局境遇。所以,两者的运作结果不平等。

return '姓名:' this.name;

这种解释没有错,可是教科书往往不报告您,为何会如此?也正是说,函数的运营景况究竟是怎么调整的?比方来讲,为啥obj.foo()固然在obj境况实施,而壹旦var foo = obj.foo,foo()就改成在全局遭逢进行?

}

正文就来分解 JavaScript 那样管理的规律。精通了这点,你就能够深透领略this的机能。

};

二、内部存款和储蓄器的数据结构

 

JavaScript 语言之所以有this的布置性,跟内部存储器里面包车型大巴数据结构有提到。

person.describe()

var obj = { foo: 5 };

// "姓名:张三"

上边的代码将3个对象赋值给变量obj。JavaScript 引擎会先在内存里面,生成二个对象{ foo: 伍},然后把那个目的的内部存款和储蓄器地址赋值给变量obj。

地点代码中,this.name表示describe方法所在的脚下目标的name属性。调用person.describe方法时,describe方法所在的此时此刻目的是person,所以正是调用person.name。

也正是说,变量obj是三个地址(reference)。前面假诺要读取obj.foo,引擎先从obj获得内部存款和储蓄器地址,然后再从该地方读出原来的对象,重临它的foo属性。

是因为目标的属性能够赋给另四个目标,所以属性所在的此时此刻目标是可变的,即this的针对性是可变的。

本来的目的以字典结构保留,每2个属性名都对应2脾质量描述对象。例如来讲,下边例子的foo属性,实际上是以上边包车型大巴格局保留的。

var A = {

{
 foo: {
  [[value]]: 5
  [[writable]]: true
  [[enumerable]]: true
  [[configurable]]: true
 }
}

name: '张三',

只顾,foo属性的值保存在属性描述对象的value属性里面。

describe: function () {

三、函数

return '姓名:' this.name;

那样的组织是很清楚的,问题在于属性的值大概是贰个函数。

}

var obj = { foo: function () {} };

};

那儿,引擎会将函数单独保存在内部存储器中,然后再将函数的地点赋值给foo属性的value属性。

 

{
 foo: {
  [[value]]: 函数的地址
  ...
 }
}

var B = {

是因为函数是三个单独的值,所以它能够在不同的境况(上下文)施行。

name: '李四'

var f = function () {};
var obj = { f: f };
// 单独执行
f()
// obj 环境执行
obj.f()

};

四、情形变量

 

JavaScript 允许在函数体内部,引用当前条件的别样变量。

B.describe = A.describe;

var f = function () {
 console.log(x);
};

B.describe()

下边代码中,函数体里面使用了变量x。该变量由运营条件提供。

// "姓名:李四"

今昔主题素材就来了,由于函数能够在分歧的周转条件进行,所以须要有1种体制,能够在函数体内部获得当前的运营条件(context)。所以,this就涌出了,它的规划目的就是在函数体内部,指代函数当前的周转条件。

地点代码中,A.describe属性被赋给B,于是B.describe就表示describe方法所在的脚下目的是B,所以this.name就本着B.name

var f = function () {
 console.log(this.x);
}
上面代码中,函数体里面的this.x就是指当前运行环境的x。
var f = function () {
 console.log(this.x);
}
var x = 1;
var obj = {
 f: f,
 x: 2,
};
// 单独执行
f() // 1
// obj 环境执行
obj.f() // 2

function f() {

地方代码中,函数f在全局碰着进行,this.x指向全局处境的x。

return '姓名:' this.name;

在obj遇到实践,this.x指向obj.x。

}

回来本文初步提出的主题素材,obj.foo()是通过obj找到foo,所以就是在obj环境试行。1旦var foo = obj.foo,变量foo就平素指向函数本人,所以foo()就改成在全局蒙受举办。

 

总结

var A = {

上述所述是作者给大家介绍的JavaScript 中的 this 专门的职业规律,希望对大家具备支持,固然大家有其它疑问请给本身留言,小编会及时过来我们的。在此也非凡多谢大家对台本之家网址的援助!

name: '张三',

您或然感兴趣的稿子:

  • JavaScript中this关键词的利用手艺、专业规律以及注意事项
  • javaScript中的this示例学习详解及办事规律
  • Angular.JS中的this指向详解
  • 浅析JavaScript中var that=this
  • 深入精晓Javascript箭头函数中的this
  • 详解JS中机械漏刻setInterval和setTImeout的this指向难点

describe: f

};

 

var B = {

name: '李四',

describe: f

};

 

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

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

地点代码中,函数f内部使用了this关键字,随着f所在的目标差别,this的对准也不及。

只要函数被赋给另3个变量,this的对准就能够变。

var A = {

name: '张三',

describe: function () {

return '姓名:' this.name;

}

};

 

var name = '李四';

var f = A.describe;

f() // "姓名:李四"

地点代码中,A.describe被赋值给变量f,内部的this就能够指向f运营时所在的对象(本例是顶层对象)。

能够接近地感到,this是负有函数运维时的八个潜藏参数,指向函数的运作处境。

 

 

 

二.接纳地方

1)全局景况

在全局情形使用this,它指的就是顶层对象window。

this === window // true

function f() {

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

}

2)构造函数

构造函数中的this,指的是实例对象。

var Obj = function (p) {

this.p = p;

};

Obj.prototype.m = function() {

return this.p;

};

上边代码定义了三个结构函数Obj。由于this指向实例对象,所以在构造函数内部定义this.p,就约等于概念实例对象有四个p属性;然后m方法能够回到这一个p属性。

var o = new Obj('Hello World!');

o.p // "Hello World!"

o.m() // "Hello World!"

3)对象的主意

当 A 对象的艺术被赋予 B 对象,该格局中的this就从指向 A 对象形成了指向 B 对象。所以要尤其小心,将有些对象的方法赋值给另贰个对象,会改造this的针对性。

var obj ={

foo: function () {

console.log(this);

}

};

obj.foo() // obj

地点代码中,obj.foo方法实行时,它在那之中的this指向obj。

但是,只有那1种用法(直接在obj对象上调用foo方法),this指向obj;其余用法时,this都指向代码块当前所在对象(浏览器为window对象)。

// 情况一

(obj.foo = obj.foo)() // window

 

// 情况二

(false || obj.foo)() // window

 

// 情况三

(1, obj.foo)() // window

上边代码中,obj.foo先运算再实行,即使值根本未曾成形,this也不再指向obj了。那是因为那时它就退出了运行条件obj,而是在大局景况进行。

能够这么敞亮,在 JavaScript 引擎内部,obj和obj.foo积攒在三个内部存款和储蓄器地址,简称为M一和M贰。唯有obj.foo()那样调用时,是从M一调用M2,由此this指向obj。不过,上面三种景况,都以一向收取M二实行演算,然后就在全局遭受实行运算结果(照旧M二),由此this指向全局蒙受。

地点三种状态一样上边包车型客车代码。

// 情况一

(obj.foo = function () {

console.log(this);

})()

// 等同于

(function () {

console.log(this);

})()

 

// 情况二

(false || function () {

console.log(this);

})()

本文由68399皇家赌场发布于最新解决方案,转载请注明出处:工作原理

关键词: 68399皇家赌场 JavaScript js this关键字

上一篇:Bootstrap4一次重大更新,4重大更新

下一篇:没有了

最火资讯