web前端 -- JavaScript总结

JavaScript 简介

js全称JavaScript，它是一门具有面向对象能力的，在浏览器上执行的，客户端脚本语言。

JavaScript 引入

放在 <script>标签之间

<script>

  alert(“hello world !”);

</script>

放在外部js文件中

<script src=”a.js”></script>

script标签的几个属性

charset：可选。编码方式。可忽略。

src：可选。包含要执行代码的外部文件。

type，可选，type="text/javascript"，可忽略

JavaScript 输出

window.alert()：弹出警告框。

document.write()：将内容写到 HTML 文档中，（如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖）。

innerHTML：写入到 HTML 元素。

console.log()：写入到浏览器的控制台。

JavaScript 变量

用于存储数据值。

1、使用 var 关键词来声明变量。

2、= 号用于为变量赋值。

先定义，后赋值

var a;

a=7;

定义的同时赋值

var b=8;

JavaScript 变量命名规则

1、第一字符必须是：字母、下划线 、$中的一种。

2、其他字符可以是字母、下划线、$或数字。

3、不能把关键字、保留字，作为标识符。

4、变量名区分大小写。

5、推荐驼峰命名法，首字母小写。

6、关键字有true，false，name，break，catch，continue，for，function，return，switch，throw，try，var，while，if，in，do，else，new，case，default，delete，finally，instanceof，typeof，throw，this，void，with等等。

变量的默认值undefined。

同时定义多个变量，变量间用逗号隔开：var a=7,b,c;

JavaScript 数据类型

简单数据类型：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol 。（Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值）

复杂数据类型：对象(Object)、数组(Array)、函数(Function)。

1、String：字符串

表示方法：要用双引号，或者单引号括起来；

\n：换行，\\：单斜杠，\"：双引号，\'：单引号

2、Number：数字

整型（整数）；

浮点型（小数）：（八进制：0开头，十六进制：0x开头，）；若数字小于1大于0，可省略前面的0；

科学计数(e)；

保留小数：toFixed(2)，会四舍五入；

非数值（NAN）：可以通过Number.NaN得到NaN值，例（0/0）；任何与NaN进行运算的结果均为NaN；NaN与自身不相等(NaN不与任何值相等)。根据 isNaN()函数判断一个值是否为：NaN

3、Boolean：布尔

4、Null：空

5、Undefined：未定义

6、Object：对象

有两个值(字面量)：true：真，false：假，区分大小写。

var a = {};

====================追加属性

var a={};

a.age=3;

||等同于

a["age"]=3;

||等同于

var abc="age";

a[abc]=3;

====================追加方法

a.eat=function (){}

====================删除对象属性，方法

语法：delete 对象名.属性名 delete 对象名.方法名

var obj={

  “age”:34,

  run:function(){}

}

delete obj.age;
================遍历对象的所有属性
语法：for in

for(var key in obj){

}

7、Array：数组

8、Function：函数

JavaScript 传值与传址的区别

传值：针对的是简单数据类型，就是把字面量完整的复制一份传过去，拷贝的值和原始的值是完全独立、互不影响的。

传址：在赋值过程中，变量实际上存储的是数据的地址（对数据的引用），而不是原始数据或者是数据的拷贝。如果值通过一个地址发生了改变，这个改变也会通过原始地址表现出来。

JavaScript 数据类型转换

1、字符串转数字：

Number("字符串")；

parseFloat("字符串")：浮点数。

parseInt("字符串")：整数。

只包含数值的字符串，会直接转成成十进制数值，如果包含前导0，即自动去掉；

如果字符串是空，那么直接转成成0；

如果不是以上字符串类型，则返回NaN；

2、数字转字符串：

num.toString();

String(num);

num+ " " 或 num+ ' '

3、布尔转数字：

Number(true)：1，Number(false)：0；

4、数字转布尔：

0： false，非0：true；

JavaScript 作用域

JavaScript 变量生命周期在它声明时初始化。如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。

局部变量：函数参数只在函数内起作用，函数内使用 var 声明的变量只能在函数内容访问，在函数执行完毕后销毁。

全局变量：变量在函数外定义，在 JavaScript 程序的任何地方都可以访问，在页面关闭后销毁。

JavaScript 数组方法

arr.concat()：连接两个或更多的数组，连接后的数组。

arr.map()：返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

arr.every()：检测数值元素的每个元素是否都符合条件。

arr.forEach()：用于调用数组的每个元素，并将元素传递给回调函数。

arr.join()：把数组的所有元素放入一个字符串。

arr.indexOf()：搜索数组中的元素，并返回它所在的位置。

arr.lastIndexOf()：搜索数组中的元素，并返回它最后出现的位置。

arr.pop()：删除数组的最后一个元素并返回删除的元素。

arr.push()：向数组的末尾添加一个或更多元素，并返回新的长度。

arr.shift()：删除并返回数组的第一个元素。

arr.unshift()：向数组的开头添加一个或更多元素，并返回新的长度。

arr.split()：选取数组的一部分，并返回一个新数组。

arr.splice：从数组中添加或删除元素。

arr.toString()：把数组转换为字符串，并返回结果。

arr.valueOf()：返回数组对象的原始值。

JavaScript 字符串方法

str.concat()：连接两个或多个字符串，返回连接后的字符串。

str.charAt()：返回指定索引位置的字符。

str.indexOf()：返回字符串中检索指定字符第一次出现的位置，如果没有返回-1。

str.lastIndexOf()：返回字符串中检索指定字符最后一次出现的位置。

str.splice()：提取字符串的片断，并在新的字符串中返回被提取的部分。

str.split()：把字符串分割为子字符串数组。

str.substr()：从起始索引号提取字符串中指定数目的字符，str.substr(from，length)。

str.substring()：提取字符串中两个指定的索引号之间的字符，str.substring(from，to)。

str.toUpperCase()：把字符串转换为大写。

str.toLowerCase()：把字符串转换为小写。

str.trim()： 移除字符串首尾空白。

str.toString()：返回字符串对象值。

str.valueOf()：返回某个字符串对象的原始值。

JavaScript 运算符优先级

递增++和递减--

1、在没有赋值操作，前置和后置是一样的。

2、在赋值时，如果运算符前置，那么会先累加或累减再赋值，

3、如果是后置运算符，则先赋值再累加或累减。

从高到低排列：

一元运算符：++（自增），--（自减），!（逻辑非）

算术运算符：*（乘），/（除），+（加），-（减）,%(取余)

比较（关系）运算符：==（等于），!=（不等于），===（全等于），！==（不全等于），>=（大于等于），<=（小于等于）

逻辑运算符：&&（逻辑与），||（逻辑或）

赋值运算符：=，+=，-=，*=，/=，%=

复杂的运算符，不要依靠优先级，应该添加小括号表明优先级

JavaScript 条件语句

if 语句：

if (condition)
{
    当条件为 true 时执行的代码
}

if...else 语句：

if (condition)
{
    当条件为 true 时执行的代码
}
else
{
    当条件不为 true 时执行的代码
}

if...else if....else 语句：

if (condition1)
{
    当条件 1 为 true 时执行的代码
}
else if (condition2)
{
    当条件 2 为 true 时执行的代码
}
else
{
  当条件 1 和 条件 2 都不为 true 时执行的代码
}

switch 语句：

break 语句用于跳出循环，只能用在循环或 switch 中。

continue 用于跳过本次循环执行下次循环，只能用在循环中。

switch(n)
{
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        与 case 1 和 case 2 不同时执行的代码
}

JavaScript 循环语句

for 循环:

for (语句 1; 语句 2; 语句 3)
{
    被执行的代码块
}

for/in 语句循环遍历对象的属性：

 for...in 循环中的代码块将针对每个属性执行一次

for (属性名 in 对象)
{
    被执行的代码块
}

while 循环:

while (条件)
{
    需要执行的代码
}

do/while 循环:

在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。

do
{
    需要执行的代码
}
while (条件);

JavaScript typeof操作符

typeof string：string。

typeof number：number。

typeof NAN：number。

typeof boolean：boolean。

typeof object：object。

typeof array：object。

typeof null：object。

typeof undefined：undefined。

typeof function：function。

JavaScript 正则表达式

语法：/正则表达式主体/修饰符(可选)

修饰符：i：不区分大小写，g：全局匹配，m：多行匹配。

正则表达式模式：[abc]：查找方括号之间的任何字符，[0-9]：查找任何从 0 至 9 的数字，(x|y)：查找任何以 | 分隔的选项。

search()：检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。

replace()：在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

test()：检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

exec() ：检索字符串的匹配。该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

JavaScript Math对象

Math.sin(x) ：正弦。

Math.cos(x) ：余弦。

Math.tan(x) ：正切。

Math.sqrt(x) ：平方根。

Math.asin(x) ：反正弦值。

Math.acos(x) ：反余弦值。

Math.atan(x)：反正切值。

Math.max(a，b，c,... ) ：最高值。

Math.min(a，b，c,... ) ：最低值。

Math.abs(x) ：绝对值。

Math.random() ：随机数。

Math.round(x)：四舍五入。

Math.ceil(x) ：上取舍。

Math.floor(x)：下取舍。

JavaScript 日期Date() 

var d = new Date();

d.getDate()：日期 (1 ~ 31)。

d.getDay()：某一天 (0 ~ 6)。

d.getFullYear()：四位数字返回年份。

d.getMonth()：月份 (0 ~ 11)，月份是从0开始的。

d.getHours()：小时 (0 ~ 23)。

d.getMinutes()：分钟 (0 ~ 59)。

d.getSeconds()：秒数 (0 ~ 59)。

d.getMilliseconds()：毫秒(0 ~ 999)。

d.getTime()：1970 年 1 月 1 日至今的毫秒数。

d.parse()：1970年1月1日午夜到指定日期（字符串）的毫秒数。

获取时间戳：

var d = new  Date();

var timestamp = Date.parse(d);//毫秒值被转化为000 ，不准确！

var timestamp = d.valueOf();

var timestamp = d.getTime();

JavaScript 错误

try 和 catch：

try {
    ...    //异常的抛出，测试代码块的错误。
} catch(e) {
    ...    //异常的捕获与处理，处理错误。
} finally {
    ...    //结束处理，不论之前的 try 和 catch 中是否产生异常都会执行该代码块。
}

throw 语句：允许我们创建自定义错误

try {
    ...    //异常的抛出
    if(x == '') throw "值为空"
} catch(e) {
    ...    //异常的捕获与处理
} finally {
    ...    //结束处理
}

JavaScript 调试

1、console.log() ；

2、debugger ；

JavaScript 变量提升

1、正常情况下，变量应该先定义、后使用。

2、若先使用后定义，就会触发变量提升，变量会被提到最前面声明，然后再在正常的位置处赋值。

3、使用变量必须声明变量 。                                                

Dom.innerHTML(a);

Var a=9;

|| 浏览器的兼容性会把上面的错误代码转换为下面无错的

Var a;

Dom.innerHTML(a);

a=9;

JavaScript 严格模式(use strict)

"use strict" 的目的是指定代码在严格条件下执行。在脚本或函数的头部添加 "use strict"。

优点：消除代码运行的一些不安全之处，保证代码运行的安全；提高编译器效率，增加运行速度；为未来新版本的Javascript做好铺垫。

限制：变量不声明不可使用；函数参数名不许重复；数字不许使用8进制。

JavaScript 表单验证

disabled：禁用。

max：最大值。

min：最小值。

required：必填。

pattern：正则表达式。

readonly：只读。

JavaScript this关键字

1、在方法中，this 表示该方法所属的对象。

2、如果单独使用，this 表示全局对象。

3、在函数中，this 表示全局对象。

4、在函数中，在严格模式下，this 是未定义的(undefined)。

5、在事件中，this 表示接收事件的元素。

6、类似 call() 和 apply() 方法可以将 this 引用到任何对象。

1、call函数
函数是特殊的对象，每个函数都有一个call方法，它可以改变函数内this的指向。
语法：对象1.方法1.call(对象2，参数1，参数2，参数3...)
执行上面的语句后，方法1中的this会指向对象2
var cat = {
	name:"加菲喵",
	sayName(a,b){
		console.log("i am："+this.name);
		console.log(a,b);
	}
}
var dog = {
	name:"欧弟",
	sayName(){
		console.log("我是："+this.name);
	}
}
cat.sayName.call(dog,5,7);
2、apply函数
applay功能和call一样，区别是参数的传递方式需要用数组
cat.sayName.apply(dog,[5,7]);
3、bind函数
bind永久改变函数内this的指向，无论进行什么操作，指向都不变。
语法：var 函数1=函数2.bind(对象1)
执行上面的代码之后，函数1中的this永远指向对象1

JavaScript let 和 const

let 和 const 属于es6语法，都是块级元素。

let 声明的变量只在 let 命令所在的代码块内有效，不能重复定义。

const 声明一个只读的常量，一旦声明，常量的值就不能改变。

JavaScript JSON

JSON 英文全称 JavaScript Object Notation，是一种轻量级的数据交换格式，是独立的语言，易于理解。

JSON.parse()：字符串转换为对象。

JSON.stringify()： 对象转换为 JSON 字符串。

javascript void

href="#"与href="javascript:void(0)"的区别

# 包含了一个位置信息，默认的锚是#top 也就是网页的上端。

而javascript:void(0), 仅仅表示一个死链接。

在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。

如果你要定义一个死链接请使用 javascript:void(0) 。

JavaScript Promise

 eval()函数将字符串作为js代码来执行；

resolve 代表一切正常，reject 是出现异常时所调用的：

new Promise(function (resolve, reject) {
    // 要做的事情...
});

JavaScript 箭头函数

1、多个参数

(参数1，参数2，...，参数n) => {函数声明} 

2、当只有一个参数时，圆括号是可选的：

(单一参数) => {函数声明}  或  单一参数 => {函数声明}

3、没有参数的函数应该写成一对圆括号:

() => {函数声明}

JavaScript 函数参数

arguments，是存放函数所有参数的数组；在函数内，可以通过arguments对象来接收传递进来的参数。

参数默认值为undefined，若调用的时候实参传入不够，那么此参数就按照默认值处理；若传入的实参过多，多余的实参会被忽略。

JavaScript 闭包

闭包其实就是一个函数，它可以读取函数内部的局部变量，实现闭包的过程如下：

父子函数嵌套时，子函数作为返回值返回，当子函数在父函数外部执行的时候，可以访问到父函数内部的变量。

优点：函数执行完毕，保存它的局部变量；在函数外部读取函数内部的变量。

缺点：闭包会导致父函数内部的变量不能及时释放，容易引起内存泄漏。

JavaScript HTML DOM HTML

创建标签元素：document.createElement("元素名");

创建文本内容：document.createTextNode("文本内容");

获取当前节点的父节点：document.parentNode();

1、通过 id 查找：document.getElementById("id名");

2、通过标签名查找：document.getElementById("id名").getElementsByTagName("标签名");

3、通过name名查找：document.getElementsByName(“name名”);

4、通过类名查找：document.getElementsByClassName("类名");

5、通过 innerHTML 改变：document.getElementById("id名").innerHTML= 新的HTML；

6、通过 attribute 改变：document.getElementById("id名").attribute = 新属性值；

7、通过 appendChild 追加：document.getElementById("id名").appendChild("追加内容")；

8、通过 insertBefore 追加：document.getElementById("id名").insertBefore("追加内容")；

9、通过 removeChild 移除：document.getElementById("id名").removeChild("移除内容")；

10、通过 replaceChild 替换：document.getElementById("id名").replaceChild("替换内容")；

11、获取输入框的值：document.getElementById("id名").value;

JavaScript HTML DOM CSS

1、通过 style 改变样式：

document.getElementById("id名").style.css属性名= "css属性值"；

document.getElementById("id名").style[css属性名]=" css属性值"；

2、setAttribute：

元素dom.setAttribute("style","属性名: 属性值;。。。");

3、设置cssText：

元素dom.style.cssText="属性名: 属性值;。。。";

4、修改className （推荐）：

元素dom.className = “class名”;

JavaScript HTML DOM 事件

1、鼠标事件

onclick：鼠标单击。

ondblclick：鼠标双击。

onmouseover：鼠标移入(触发一次)。

onmouseout：鼠标移出。

onmousemove：鼠标在元素上移动（持续触发）。

oncontextmenu：鼠标右键。

onmousedown：鼠标按下。

onmouseup：鼠标松开。

2、表单事件

onfocus：表单获取焦点。

onblur：表单失去焦点。

onchange：表单改变，并失去焦点（text，textarea）。

3、键盘事件

onkeydown：键盘被按下，若不松手，会持续触发。

onkeyup：键盘弹起后触发。

4、其它事件

onload：进入页面时执行。

onunload：离开页面时执行。

JavaScript HTML DOM EventListener

addEventListener()：向指定元素添加事件，允许向同一个元素添加多个事件，同个元素添加不同类型的事件。

语法：element.addEventListener(事件，函数，useCapture)。

useCapture：可选的，默认为false冒泡，true为捕捉。

removeEventListener()：移除事件的监听。

语法：element.removeEventListener(事件，函数)。

JavaScript 定时器

setTimeout()：定时器，执行1次。clearTimeout()：取消定时器

语法：setTimeout(“要执行的代码”, 等待的毫秒数) 或 setTimeout(函数名||匿名函数, 等待的毫秒数)。

setInterval()：定时器，不停的执行。clearInterval()：取消定时器

语法：setInterval(“要执行的代码”, 等待的毫秒数) 或 setInterval(函数名||匿名函数, 等待的毫秒数)。

JavaScript 操作dom(元素属性)

读取dom：id.getAttribute(“属性名”);

修改dom：id.setAttribute(“属性名”，”属性值”);

移除dom：removeAttribute（“属性名”）；

注意：IE6及更低版本不支持removeAttribute()方法。

JavaScript 事件冒泡

 当父子容器发生嵌套，父子容器都添加了点击事件，事件将先触发子容器，再触发父容器。

阻止事件冒泡，指的是只触发子容器，不再向父容器触发。

event.stopPropagation()；

event.stopImmediatePropagation()；

JavaScript 事件委托

事件委托，也叫事件代理，指的是，利用js的事件冒泡机制，通过事件的target属性，使用一个事件，管理一系列事件。

target：指的是触发事件的目标元素。

currentTarget：currentTarget 事件绑定的元素。

JavaScript 常用的Window方法

alert()：警告框。

confirm()：确认框。

prompt：输入提示框。

print：打印。

JavaScript history

history.back()：后退。

history.forward()：前进。

history.go(num)：向前或向后num步。

history.go(0)：刷新当前页面。

JavaScript dom尺寸与鼠标坐标

1 相对于父元素偏移坐标：

event.offsetX：以事件发生者左上顶角为原点，x 轴方向偏移量。

event.offsetY：以事件发生者左上顶角为原点，y 轴方向偏移量。

注意：不兼容 Mozilla（火狐）

2 相对于文档偏移坐标：

event.pageX ：以文档窗口左上顶角为原点，x 轴方向偏移量。

event.pageY：以文档窗口左上顶角为原点，y 轴方向偏移量。

JavaScript 存储

1、localStorage：

localStorage可以将数据永久存储到本地，除非主动删除，或者清除浏览器缓存，空间大小：5M，只能存储字符串。

兼容性：

在IE8以上的IE版本才支持localStorage这个属性。

localStorage属于永久性存储，如果存储内容多的话会消耗内存空间，会导致页面变卡。

注：遵循同源策略，只能操作当前域下的数据（协议，域名，端口号一致）

存储写入：localStorage.setItem(key,data)；

存储读取：localStorage.getItem(key)；若找不到，就返回null。

删除数据：删除指定数据：localStorage.removeItem("x1");  或  删除所有数据：localStorage.clear();

2、sessionStorage：

sessionStorage 与 localStorage 的语法一样，但保存数据的生命周期与 localStorage 不同。

sessionStorage。在关闭了浏览器窗口后就会被销毁。

存储写入：sessionStorage .setItem(key,data)；

存储读取：sessionStorage .getItem(key)；若找不到，就返回null。

删除数据：删除指定数据：sessionStorage .removeItem("x1");  或  删除所有数据：sessionStorage .clear();

3、cookie存储

cookie，可以翻译为“小甜品，小饼干”，是存储在浏览器端的一些数据。它有如下特点：

每个域名下最多有20个cookie（不同浏览器略有区别）；

cookie最大占用空间为4k；

cookie具有有效日期的概念，超过有效期，就会被自动删除；

cookie有域名限制，只有设置的域名才可以访问，若不设置，会默认限制为创建的域名；

每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题；

只能存储字符串。

cookie语法：key=value;[expires=date];[path=path];[domain=somewhere.com]; [secure]

中括号是可选，name=value是必选。

expires=date 失效时间，若不声明，则浏览器关闭后失效

path=path 访问路径，当设置了路径，只有设置那个路径文件才可以访问

domain=domain 访问域名，只有设置的域名才可以访问

secure 安全设置，必须通过HTTPS传输才能获取

1 添加cookie
var date = new Date(); //创建一个

date.setDate(date.getDate() + 7); //设置过期日期

document.cookie = "user=yaoming;expires=" + date;

2 读取cookie
document.cookie

得到的值格式如下：”age=17; num=90; ...num2=9”

3 删除某个cookie
把他的过期时间设置为0，或者过去，让他过期

document.cookie = "user= ; expires=" + new Date(0);

JavaScript localStorage，sessionStorage，cookie对比

相同点：他们都是在本地存储数据；都遵循同源策略；都是只能存储字符串。

不同点：

存储大小：cookie大小4k；localStorage，sessionStorage大小5M。

生命周期：cookie，根据自己的设置；localStorage，永久有效，除非主动删除；sessionStorage，仅在当前会话下有效，关闭页面或浏览器后被清除。

JavaScript 阻止表单提交

1 onclick的return false法
<input type="submit" value="提交" onclick="return false"/>
<form action="a.php">
	<input type="submit" value="提交" onclick="return test()"/>
</form>
function test(){
        return false;
}
<form action="a.php">
	<input type="submit" value="提交" id=”x1” />
</form>
x1.onclick=function (){
        return false;
}
2 event.preventDefault();
event.preventDefault();

JavaScript 重置表单

form里嵌套type为reset的按钮

<input type=”reset”/>

<button type="reset">按钮</button>

用form对象的reset（）函数

表单id.reset();

JavaScript 表单内容获取

语法：表单id.elements[“表单name”].value；

例如：

读： alert(form1.elements[“age”].value);

写： form1.elements[“age”].value=“888”；

checkbox复选框的值获取

<form id="form1" action="a.php" method="post">
	<input type="checkbox" value="1" name="book">1111
	<input type="checkbox" value="5" name="book">222
	<input type="checkbox" value="8" name="book">333	
</form>
var arr = form1.elements["book"];		
for(var i=0;i<arr.length;i++){
	if(arr[i].checked){
		console.log(arr[i].value);
	}
}

JavaScript 默认行为

默认行为指的是元素在点击后，自动执行某些行为，例如：a链接的跳转，表单的submit提交

阻止默认行为（submit和a跳转）

1、event.preventDefault() ；  // 非ie(ie11+)
2、event.returnValue = false ； // ie
3、return false；

JavaScript 立即执行函数

立即执行函数，就是立即执行的匿名函数，他的作用是生成一个独立的作用域，避免污染全局变量，它有如下8种使用方式：

1、(function(){}()),推荐使用。

2、(function(){})()。

3、[function(){}()]。

4、+function(){}()。

5、-function(){}()。

6、~function(){}()。

7、void function(){}()。

8、!function(){}()。

JavaScript `模板字符串

模板字符串，用反单引号``表示，它有如下作用：

1、和单、双引号一样，表示字符串

2、可换行

var str=`

<ul>

<li>11</li>

<li>22</li>

</ul>

`

3、字符串中可嵌入变量和表达式

var a=“罗玉凤”;

var str=`你好：${a}`;

var str1=`你好：${a+1}`;

JavaScript 控制对象属性Object.defineProperty

Object.defineProperty可以控制对象属性的，例如是否可被for in 循环到，是否可修改，是否可删除，默认值，修改之前进行拦截

语法：Object.defineProperty（对象名, ”属性名”, {数据描述符}）

1、属性描述符-数据描述符

var obj={};

Object.defineProperty(obj,”age”,{

configurable:true,//能否通过delete删除此属性

enumerable:true,//能否被for in循环到

value:18,//给此属性赋值

writable:true//此属性是否可被修改

})

2、属性描述符-访问器描述符

var obj={_age:0};

Object.defineProperty(obj,”age”,{

configurable:true,//能否通过delete删除此属性

enumerable:true,//能否被for in循环到

get(){

return this._age;

}

set(val){

this._age=val;

}

})

JavaScript 浏览器

垃圾回收机制：当程序在运行的时候，需要申请内存来存储变量，若此变量不再使用，符合垃圾回收条件，浏览器会不定时把它清理掉，这就叫垃圾回收。

垃圾回收方式：标记清除法；引用计数法。

内存泄漏：程序中，不再使用的变量，不能得到及时的清理，就会引起内存泄露，导致程序越用越卡。

标记清除法：浏览器先给内存中的所有变量加上标记；从全局变量window开始，递归遍历它的所有属性，再遍历它属性的属性，依次类推，直到找到所有属性；那些在步骤2中找不到的属性，就要被垃圾回收机制清理掉。

引用计数法：浏览器给所有变量标记被引用次数；若引用次数为0，此可以被垃圾回收。

注意：此方法有内存泄露的风险，它不能解决循环引用的问题。