js this

先解释常见的几个名称：字面量：英文是literals，看见什么就是什么

js中有数字字面量和字符串字面量

数字字面量：整数型 ：十进制，八进制（00开头）,十进制(0x),浮点型（允许使用e来表示乘以10的几次幂），Infinity(无穷大)，NAN,只有十进制具有字面量，八进制和十六进制没有字面量

console.log("%c","line-height：100px") 

网页的所有元素可以分为块元素和行元素。

一行文字所在的一个逻辑区域是行元素，其他的元素就都是块元素。

line-height只针对行元素，height针对其他所有元素。

NAN表示特殊的字符，本应该返回字面量数值，避免终止程序运行，也不要抛出异常。

isNaN判断接受到一个值时是否可以转为数值

NaN和任何一个值都不相等，就连自己都不相等。

console.log(123)个就会返回true,说明可以返回数值，console.log('23');数值形式的字符串也可以返回trUe，

js中 将值转化为数值有三个方法：parseInt ,parseFloat ,Number();,Number可以转化所有值，注意是可以转化的值，不能转化的就返回NaN,parseInt和parseFloat只能转化字符串类型的数值。

一般不用Number转化，用parseInt ,注意parseInt转化小数，舍去小数部分

 

接着讲字符串字面量：字符串字面量必须由双引号，单引号引出，

字符串字面量必须由‘’或者“”包裹，并且是同一中引号，

\转义字符，\n换行，\t 缩进2字符

正常情况下，引号里面可以有不同的引号，可以用\来表达引号

这里再介绍一下：转义字符

html中象<>&这些特殊的符号，浏览器一般会不显示，为了将这些符号转化为字符显示出来，如浏览器需要显示<小于号，那么就需要转字符串，转移字符串由&实体;来表示，实体可以是名称，编号。

&lt;表示< less than 

其中转义字符&rarr;表示"→"；

html中 的空格，无论由多少个空格，都只会有一个空格来显示，为了增加空格可以&nbsp;

HTML特殊转义字符列表

最常用的字符实体

Character Entities

显示	说明	实体名称	实体编号
	半方大的空白	 	 
	全方大的空白	 	 
	不断行的空白格	 	 
<	小于	&lt;	&#60;
>	大于	&gt;	&#62;
&	&符号	&amp;	&#38;
"	双引号	&quot;	&#34;
©	版权	&copy;	&#169;
®	已注册商标	&reg;	&#174;
?	商标（美国）	?	&#8482;
×	乘号	&times;	&#215;
÷	除号	&divide;	&#247;

以上是html显示在浏览器上所用到的转移字符串，，js也有转义字符，js为什么用转移字符，因为js的字符串默认是"开始，“结束， 如果一段中有""""必须要进行转移，不然会截成一段，加上\就转义成了"这个符号，而不是字符串的标识

 

\b	退格
\f	走纸换页
\n	换行
\r	回车
\t	横向跳格 (Ctrl-I)
\'	单引号
\"	双引号
\\	反斜杠

<input value="" type="button" onclick="alert('OK');" />

<input value="Test" type="button" onclick="alert(&quot;OK&quot;);" />

不论是html和js 字符串都是从左边开始",向右进行解析，解析到",就认为结束，所以首尾不需要转义

 

js函数：

js函数是怎么 声明的：function 

问题的由来

学懂 JavaScript 语言，一个标志就是理解下面两种写法，可能有不一样的结果。

var obj = {

foo: function () {}

};

 

var foo = obj.foo;

 

// 写法一

obj.foo()

 

// 写法二

foo()

上面代码中，虽然obj.foo和foo指向同一个函数，但是执行结果可能不一样。请看下面的例子。

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.foo，foo()就变成在全局环境执行？

本文就来解释 JavaScript 这样处理的原理。理解了这一点，你就会彻底理解this的作用。

二、内存的数据结构

JavaScript 语言之所以有this的设计，跟内存里面的数据结构有关系。

var obj = { foo: 5 };

上面的代码将一个对象赋值给变量obj。JavaScript 引擎会先在内存里面，生成一个对象{ foo: 5 }，然后把这个对象的内存地址赋值给变量obj。

 

也就是说，变量obj是一个地址（reference）。后面如果要读取obj.foo，引擎先从obj拿到内存地址，然后再从该地址读出原始的对象，返回它的foo属性。

原始的对象以字典结构保存，每一个属性名都对应一个属性描述对象。举例来说，上面例子的foo属性，实际上是以下面的形式保存的。

 

{

foo: {

[[value]]: 5

[[writable]]: true

[[enumerable]]: true

[[configurable]]: true

}

}

注意，foo属性的值保存在属性描述对象的value属性里面。

三、函数

这样的结构是很清晰的，问题在于属性的值可能是一个函数。

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

这时，引擎会将函数单独保存在内存中，然后再将函数的地址赋值给foo属性的value属性。

 

{

foo: {

[[value]]: 函数的地址

...

}

}

由于函数是一个单独的值，所以它可以在不同的环境（上下文）执行。

var f = function () {};

var obj = { f: f };

 

// 单独执行

f()

 

// obj 环境执行

obj.f()

四、环境变量

JavaScript 允许在函数体内部，引用当前环境的其他变量。

var f = function () {

console.log(x);

};

上面代码中，函数体里面使用了变量x。该变量由运行环境提供。

现在问题就来了，由于函数可以在不同的运行环境执行，所以需要有一种机制，能够在函数体内部获得当前的运行环境（context）。所以，this就出现了，它的设计目的就是在函数体内部，指代函数当前的运行环境。

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

上面代码中，函数f在全局环境执行，this.x指向全局环境的x。

 

在obj环境执行，this.x指向obj.x。

 

回到本文开头提出的问题，obj.foo()是通过obj找到foo，所以就是在obj环境执行。一旦var foo = obj.foo，变量foo就直接指向函数本身，所以foo()就变成在全局环境执行。

作者：阮一峰

http://www.ruanyifeng.com/blog/2018/06/javascript-this.html

转载于:https://my.oschina.net/u/3888522/blog/1834304