当一个函数调用时，会创建一个执行上下文，这个上下文包括函数调用的一些信息(调用栈，传入参数，调用方式)，this就指向这个执行上下文。

this不是静态的，也并不是在编写的时候绑定的，而是在运行时绑定的。它的绑定和函数声明的位置没有关系，只取决于函数调用的方式。

本篇文章有点长，涉及到很多道面试题，有难有简单，如果能耐心的通读一编，我相信以后this都不成问题。

学习this之前，建议先学习以下知识:

在文章的最开始，陈列一下本篇文章涉及的内容，保证让大家不虚此行。

在JavaScript中，要想完全理解this，首先要理解this的绑定规则，this的绑定规则一共有5种：

1. ES6新增箭头函数绑定

下面来一一介绍以下this的绑定规则。

默认绑定通常是指函数独立调用，不涉及其他绑定规则。非严格模式下，this指向window，严格模式下，this指向undefined。

题目1.1：非严格模式

这个foo值可以说道两句：
如果学习过预编译的知识，在预编译过程中，foo和print函数会存放在全局GO中(即window对象上)，所以上述代码就类似下面这样：

把题目1.1稍作修改，看看严格模式下的执行结果。

注意事项：开启严格模式后，函数内部this指向undefined，但全局对象window不会受影响

let/const定义的变量存在暂时性死区，而且不会挂载到window对象上，因此print中是无法获取到a和b的。

题目1.4：对象内执行

foo虽然在obj的bar函数中，但foo函数仍然是独立运行的，foo中的this依旧指向window对象。

题目1.5：函数内执行

这个题与题目1.4类似，但要注意，不要把它看成闭包问题

题目1.6：自执行函数

默认情况下，自执行函数的this指向window
自执行函数只要执行到就会运行，并且只会运行一次，this指向window。

函数的调用是在某个对象上触发的，即调用位置存在上下文对象，通俗点说就是**XXX.func()**这种调用模式。

此时func的this指向XXX，但如果存在链式调用，例如XXX.YYY.ZZZ.func，记住一个原则：this永远指向最后调用它的那个对象。

题目2.2：对象链式调用

感觉上面总是空谈链式调用的情况，下面直接来看一个例题：

隐式绑定可是个调皮的东西，一不小心它就会发生绑定的丢失。一般会有两种常见的丢失：

• 使用另一个变量作为函数别名，之后使用别名执行函数
• 将函数作为参数传递时会被隐式赋值

隐式绑定丢失之后，this的指向会启用默认绑定。

题目3.1：取函数别名

JavaScript对于引用类型，其地址指针存放在栈内存中，真正的本体是存放在堆内存中的。

上面将obj.foo赋值给foo，就是将foo也指向了obj.foo所指向的堆内存，此后再执行foo，相当于直接执行的堆内存的函数，与obj无关，foo为默认绑定。笼统的记，只要fn前面什么都没有，肯定不是隐式绑定。

不要把这里理解成window.foo执行，如果foo为let/const定义，foo不会挂载到window上，但不会影响最后的打印结果

题目3.2：取函数别名

如果取函数别名没有发生在全局，而是发生在对象之中，又会是怎样的结果呢？

题目3.3：函数作为参数传递

用函数预编译的知识来解答这个问题：函数预编译四部曲前两步分别是：

1. 找形参和变量声明，值赋予undefined
2. 将形参与实参相统一，也就是将实参的值赋予形参。

obj.foo作为实参，在预编译时将其值赋值给形参fn，是将obj.foo指向的地址赋给了fn，此后fn执行不会与obj产生任何关系。fn为默认绑定。

题目3.4：函数作为参数传递

将上面的题略作修改，doFoo不在window上执行，改为在obj2中执行

• fn(): 没有于obj2产生联系，默认绑定，打印2

下面这个题目我们写代码时会经常遇到：

setTimeout是异步调用的，只有当满足条件并且同步代码执行完毕后，才会执行它的回调函数。

所以如果我们想在setTimeout或setInterval中使用外界的this，需要提前存储一下，避免this的丢失。

题目3.6：隐式绑定丢失综合题

本题目不做解析，具体可以参照上面的题目。

显式绑定比较好理解，就是通过call()、apply()、bind()等方法，强行改变this指向。

上面的方法虽然都可以改变this指向，但使用起来略有差别：

• bind()函数会返回新函数，不会立即执行函数

题目4.1：比较三种调用方式

• foo.bind(obj): 显式绑定，但不会立即执行函数，没有返回值

题目4.2：隐式绑定丢失

题目3.4发生隐式绑定的丢失，如下代码：我们可不可以通过显式绑定来修正这个问题。

题目4.3：回调函数与call

接着上一个题目的风格，稍微变点花样：

乍一看上去，这个题看起来有些莫名其妙，setTimeout那是传了个什么东西？

这样一看，本题就清楚多了，类似题目4.2，修正了回调函数内fn的this指向。

上面由于foo没有返回函数，无法执行call函数报错，因此修改一下foo函数，让它返回一个函数。

这里千万注意：最后一个foo().call(obj)有两个函数执行，会打印2个值。

将上面的call全部换做bind函数，又会怎样那？

call是会立即执行函数，bind会返回一个新函数，但不会执行函数

首先我们要先确定，最后会输出几个值？bind不会执行函数，因此只有两个foo()会打印a。

• foo.bind(obj): 返回新函数，不会执行函数，无输出

做到这里，不由产生了一些疑问：如果使用call、bind等修改了外层函数的this，那内层函数的this会受影响吗？

foo.call(obj): 第一层函数foo通过call将this指向obj，打印1；第二层函数为匿名函数，默认绑定，打印2。

把上面的代码移植到对象中，看看会发生怎样的变化？

看着这么多括号，是不是感觉有几分头大。没事，咱们来一层一层分析：

显式绑定一开始讲的时候，就谈过call/apply存在传参差异，那咱们就来传一下参数，看看传完参数的this会是怎样的美妙。

要注意call执行的位置：

• obj.foo(a): foo的AO中b值为传入的a(形参与实参相统一)，值为2，返回匿名函数fn

麻了吗，兄弟们。进度已经快过半了，休息一会，争取把this一次性吃透。

上面提了很多call/apply可以改变this指向，但都没有太多实用性。下面来一起学几个常用的call与apply使用。

题目5.2：类数组转为数组

题目5.3：数组高阶函数

日常编码中，我们会经常用到forEach、map等，但这些数组高阶方法，它们还有第二个参数thisArg，每一个回调函数都是显式绑定在thisArg上的。

关于数组高阶函数的知识可以参考: JavaScript之手撕高阶数组函数

使用new来构建函数，会执行如下四部操作：

1. 创建一个空的简单JavaScript对象（即{}）；
2. 为步骤1新创建的对象添加属性__proto__，将该属性链接至构造函数的原型对象 ；
3. 将步骤1新创建的对象作为this的上下文 ；
4. 如果该函数没有返回对象，则返回this。

关于new更详细的知识，可以参考：

通过new来调用构造函数，会生成一个新对象，并且把这个新对象绑定为调用函数的this。

题目6.2：属性加方法

这个题很难不让人想到如下代码，都是函数嵌套，具体解法是类似的，可以对比来看一下啊。

题目6.3：new界的天王山

new界的天王山，每次看懂后，没过多久就会忘掉，但这次要从根本上弄清楚该题。

接下来一起来品味品味：

1. 分析后面三个打印结果之前，先补充一些运算符优先级方面的知识(图源：)
   

   从上图可以看到，部分优先级如下：new(带参数列表) = 成员访问 = 函数调用 > new(不带参数列表)

首先从左往右看：new Foo属于不带参数列表的new(优先级19)，Foo.getName属于成员访问(优先级20)，getName()属于函数调用(优先级20)，同样优先级遵循从左往右执行。

这里有一个误区：很多人认为这里的new是没做任何操作的的，执行的是函数调用。那么如果执行的是Foo.getName()，调用返回值为undefined，new undefined会发生报错，并且我们可以验证一下该表达式的返回结果。

可见在成员访问之后，执行的是带参数列表格式的new操作。

1. • 同步骤4一样分析，先执行new Foo()，返回一个以Foo为构造函数的实例

从左往右分析: 第一个new不带参数列表(优先级19)，new Foo()带参数列表(优先级20)，剩下的成员访问和函数调用优先级都是20

• new Foo()执行，返回一个以Foo为构造函数的实例

通过这一步比较应该能更好的理解上面的执行顺序。

兄弟们，革命快要成功了，再努力一把，以后this都小问题啦。

箭头函数没有自己的this，它的this指向外层作用域的this，且指向函数定义时的this而非执行时。

1. this指向外层作用域的this: 箭头函数没有this绑定，但它可以通过作用域链查到外层作用域的this
2. 指向函数定义时的this而非执行时: JavaScript是静态作用域，就是函数定义之后，作用域就定死了，跟它执行时的地方无关。更详细的介绍见。

题目7.1：对象方法使用箭头函数

上文说到，箭头函数的this通过作用域链查到，intro函数的上层作用域为window。

题目7.2：箭头函数与普通函数比较

题目7.3：箭头函数与普通函数的嵌套

题目7.4：new碰上箭头函数

题目7.5：call碰上箭头函数

箭头函数由于没有this，不能通过callapplyind来修改this指向，但可以通过修改外层作用域的this来达成间接修改

• 第一层函数为普通函数，通过call修改this为obj2，打印obj2。第二层函数为箭头函数，它的this与外层this相同，同样打印obj2。

• 箭头函数没有this，它的this是通过作用域链查到外层作用域的this，且指向函数定义时的this而非执行时。
• 不可以用作构造函数，不能使用new命令，否则会报错
• 箭头函数没有arguments对象，如果要用，使用rest参数代替
• 不可以使用yield命令，因此箭头函数不能用作Generator函数。
• 不能用call/apply/bind修改this指向，但可以通过修改外层作用域的this来间接修改。

1. 箭头函数不能作为构造函数

2. DOM中事件的回调函数中this已经封装指向了调用元素，如果使用构造函数，其this会指向window对象

学完上面的知识，是不是感觉自己已经趋于化境了，现在就一起来华山之巅一决高下吧。

题目9.1: 对象综合体

这个题目并不难，就是把上面很多题做了个整合，如果上面都学会了，此题问题不大。

题目9.2：隐式绑定丢失

突然出现了一个代码很少的题目，还乍有些不习惯。

• (foo.bar)(): 上面提到过运算符优先级的知识，成员访问与函数调用优先级相同，默认从左到右，因此括号可有可无，隐式绑定，打印20
• (foo.bar, foo.bar)(): 隐式绑定丢失，起函数别名，将逗号表达式的值(第二个foo.bar)赋值给新变量，之后执行新变量所指向的函数，默认绑定，打印10。

上面那说法有可能有几分难理解，隐式绑定有个定性条件，就是要满足XXX.fn()格式，如果破坏了这种格式，一般隐式绑定都会丢失。

这个题要注意一下，有坑。

• arguments[0](): 这种执行方式看起来就怪怪的，咱们把它展开来看看：

  1. arguments[0]: 这是访问对象的属性0？0不好理解，咱们把它稍微一换，方便一下理解：

  2. 到这里大家应该就懂了，隐式绑定，fn函数this指向arguments，打印2

题目9.4：压轴题(推荐看)

1. 我们来一句一句的分析：

   • 返回匿名函数，形成闭包

   此时的obj可以类似的看成以下代码(注意存在闭包):

2. • number *= 3: 当前AO中没有number属性，沿作用域链可在立即执行函数的AO中查到number属性，修改其值为9

JavaScript采用的静态作用域，当定义函数后，作用域链就已经定死。(更详细的解释文章最开始的推荐中有)

• 默认绑定: 非严格模式下this指向全局对象，严格模式下this会绑定到undefined
• 隐式绑定: 满足XXX.fn()格式，fn的this指向XXX。如果存在链式调用，this永远指向最后调用它的那个对象
• 隐式绑定丢失：起函数别名，通过别名运行；函数作为参数会造成隐式绑定丢失。
• new绑定: 通过new来调用构造函数，会生成一个新对象，并且把这个新对象绑定为调用函数的this。
• 箭头函数绑定: 箭头函数没有this，它的this是通过作用域链查到外层作用域的this，且指向函数定义时的this而非执行时

this到这里基本接近尾声了，松了一口气。
这篇文章写了好久，找资源，修改博文，各种乱七八糟的杂事，导致迟迟写不出满意的博文。有可能天生理科男的缘故吧，怎么写感觉文章都很生硬，但好在还是顺利写完了。

在文章的最后，感谢一下参考的博客和题目的来源

最后按照阿包惯例，附赠一道面试题：

最后祝大家都能学好前端，步步登神，成为大佬。

---

---

这题不难，IIFE 中的赋值过程其实是（赋值过程从右到左）：

接下去就不难了，a 是局部变量，b 是全局变量。

---

前面两个输出没有问题，都是 bar，问题出在后面两个。用了 IIFE 后，匿名函数内的 this 其实已经指到了 window，所以第三个输出 this.foo 其实是 window.foo，而全局对象并没有 foo 这个 key，所以输出 undefined，而第四个输出，因为 self 引用了 myObject，所以还是 bar。

---

为什么要用 IIFE？

简单来说就是为了能模块化，创建私有变量等等，很多类库（比如 jQuery）都用了这样的写法。

可以参考我以前翻译的一篇文章 

---

严格模式下进行 Javascript 开发有啥好处？

这个就不展开来了，可以参考阮一峰老师的  或者自行谷歌百度。

---

执行以上两个函数，会返回相同的东西吗？

不会，第二个函数会返回 undefined。这是由于 Javascript 的封号插入机制决定的，如果某行代码，return 关键词后没有任何东西了，将会自动插入一个封号，显然 foo2 函数中，当 return 后被插入一个封号后，尽管后面的语句不符合规定，但是因为没有执行到，所以也不会报错了。没有 return 任何东西的函数，默认返回

所以很多 Javascript 规范建议把 { 写在一行中，而不是另起一行。

---

NaN 是什么鬼？typeof 的结果是？如果一个变量的值是 NaN，怎么确定？

NaN 是 'not a number' 的缩写，表示 "不是一个数字"，通常会在运算过程中产生：

NaN 和任何变量都不相等，包括 NaN 自己：

---

上面代码的输出结果是什么？

这个问题正好我之前研究过，有兴趣的可以参考下 ，看懂了还有兴趣的可以看下这篇 

---

写一个方法 isInterger(x)，可以用来判断一个变量是否是整数。

ES6 中自带了 Number.isInteger() 方法。但是目前 ES5 中没有自带的方法，可以把一个数去掉小数点后和原数进行比较，判断是否相等，那么问题就演变成如何对一个数进行取整了。

---

以上代码的输出结果是？

这题不难，只要知道 Javascript 是单线程的语言， 一些异步事件是在主体 js 执行完之后执行即可，所以主体的 1、4 先输出，而后是 3、2，没有问题，因为 3 的定时设置比 2 早。

具体可以参考我之前的文章 

---

判断一个字符串是不是回文。

这里想到一个进阶题，求字符串最长回文子串，可以参考 

---

写一个 sum 方法，使得以上代码得到预期结果。这题可以参考我以前的文章  中的最后一题，理论上此题更简单，因为它没要求能扩展（比如 sum(2)(3)(4)），甚至可以这样：

---

点击 'Button 4' 后输出什么？如何使得输出能跟预期相同？

答案是输出 5，事实上点击任意的 button，输出都是 5。因为循环结束后，i 值变成了 5。如何改，使得输出分别是 0, 1, 2, 3, 4？用闭包在内存中保存变量，可以参考我之前的文章  中的第 8 题。

---

这道题我答错了，忽略了 reverse() 方法的一个要重性质，reverse() 方法执行的结果并不是创建一个副本，而是在原数组上直接操作，并返回该数组的引用。

知道了这一点，该题也就迎刃而解了。arr2 其实和 arr1 引用了同一个对象，所以在 arr2 上的操作也会同时反映到 arr1 上。

---

+"2" 能将字符串 "2" 转换成整数 2，-"2" 同理，而两个变量进行 "+" 运算时，如果都是数字和字符串，则分别进行数字相加和字符串拼接，如果一个是数字一个是字符串，则将数字转为字符串，如果是 "-" 运算呢？则将字符串转为数字。

"A" - "B" 会返回 NaN，因为 "A" 和 "B" 无法转成数字进行运算，这里不要以为 "A" 和 "B" 能转为 ASCII码 进行运算（不要和 C 语言搞混了）。而 NaN 和字符串相加，会转成 "NaN" 和字符串去拼接，NaN 和任何数字相加结果还是 NaN。

---

以上代码可能会由于递归调用导致栈溢出，如何规避这个问题？

首先，任何递归都可以用迭代来代替，所以改写成迭代方式肯定没有问题。

而原文给的解答令人深思：

利用 setTimeout 的异步性质，完美地去除了这个调用栈。

如果你还是摸不着头脑，简单举个栗子：

上面的代码会依次输出 0 和 1，因为程序中形成了一个调用栈，1 被压到了栈底，最后出栈。

这回就是 1 和 0 了，因为 setTimeout 的回调只有当主体的 js 执行完后才会去执行，所以先输出了 1，自然也就没有栈这一说法了。

事实上，并不是所有递归都能这样改写，如果下一次递归调用依赖于前一次递归调用返回的值，就不能这么改了。

---

---

以上代码输出什么？如何能输出期望值？

很显然，输出都是 5。这题和第十三题有些类似，用立即执行函数+闭包即可。

还有种优雅的解法，使用 ：

---

|| 和 && 是短路运算符。先说说 ||，如果前面变量值为 false（包括 0、null、undefined、flase、空字符串等等），则返回后面变量值，否则返回前面变量值。&& 恰恰相反，如果前面变量为 false，则返回前面变量值，否则返回后面变量值。

---

== 和 === 的区别， 后者是全等，只有两个值完全相同（或者两个对象引用相同）时，才会返回 true，而前者在比较时会进行隐式的转换。

---

一道有趣的题目，答案是 456。

---

其实可以写成这样，清楚些：

其实就是一个立即执行函数+递归，求个阶乘而已（10!）。给立即执行函数加了个名字 f，方便在递归里调用，其实完全可以用 arguments.callee 代替：

---

显然是 1，闭包，能引用函数外的变量。

---

执行第一次输出时，this 指向了 window，如何规避这个问题？用 bind 绑定 this 指向，具体可以参考 ，注意低版本 IE 的兼容。

---

遍历 DOM 树，不难，深度优先搜索即可。

这道题可以拓展，先序遍历 DOM树，中序遍历，甚至后序遍历的结果是？具体可以参考前文 ，都是树，原理是一样一样的。

方法1：直接改变arrayList所指向的对象，原对象并不改变。

• 原型prototype机制或apply和call方法去实现较简单，建议使用构造函数与原型混合方式

5、例举3种强制类型转换和2种隐式类型转换？

• 前者是切割成数组的形式，后者是将数组转换成字符串

11、ajax请求时，如何解释json数据

• 使用eval parse，鉴于安全性考虑，使用parse更靠谱

• 让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！

12（1）请说说事件委托机制？这样做有什么好处？

• 事件委托，就是某个事件本来该自己干的，但是自己不干，交给别人来干，就叫事件委托。打个比方：一个button对象，本来自己需要监控自身的点击事件，但是自己不来监控这个点击事件，让自己的父节点来监控自己的点击事件。

• A，提高性能：例如，当有很多li同时需要注册时间的时候，如果使用传统方法来注册事件的话，需要给每一个li注册事件。然而如果使用委托事件的话，就只需要将事件委托给该一个元素即可。这样就能提高性能

• B，新添加的元素还会有之前的事件

13、闭包是什么，有什么特性，对页面有什么影响？简要介绍你理解的闭包

　　闭包就是能够读取其他函数内部变量的函数

　　通俗的讲：就是函数a的内部函数b，被函数a外部的一个变量引用的时候，就创建了一个闭包。

• ② 减少传递函数的参数量

• 使用闭包会占有内存资源，过多的使用闭包会导致内存溢出等.

14、添加 插入 替换 移除 到某个接点的方法

14（1）、DOM怎样添加、移动、复制、创建和查找节点

• 前者会自动转换类型，后者不会

　　==判断内容是否相等不比较类型

　　===判断内容相等且类型也相等

16、编写一个b继承a的方法、

17、如何阻止事件冒泡和默认事件

17（1）什么是事件冒泡/捕获

事件冒泡：子元素事件的触发会影响父元素事件

• B，关闭事件冒泡：假设传统方式事件的返回值为e，就可以通过e.stopPropagation()来关闭事件冒泡；

事件捕获：父元素的事件会影响子元素的事件；

19、谈谈this对象的理解

• this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。
• 但是有一个总原则，那就是this指的是调用函数的那个对象。
• this一般情况下：是全局对象Global。作为方法调用，那么this就是指这个对象

• this是一个关键字，它代表函数运行时，自动生成一个内部对象，只能在函数内部使用
• 1.作为纯粹的函数调用this指向全局对象
• 2.作为对象的方法调用this指向调用对象
• 3.作为构造函数被调用this指向新的对象（new会改变this的指向）
• this总是指向函数的直接调用者（而并非间接调用者）；
• 如果有new关键字，this指向new出来的那个对象；
• 在事件中，this指向这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window；

24、对于前端自动化构建工具有了解吗？简单介绍一下

25、说一下什么是JavaScript的同源策略？

• 一段脚本只能读取来自同一来源的窗口和文档的属性，这里的同一源指的是主机名，协议和端口号的组合

26、eval是指做什么的？

• 它的功能是把对应的字符串解析成JS代码并运行；
• 应该避免使用eval，不安全，非常耗性能（2次、一次解析成js语句，一次执行）；

27.请列举字符串操作的方法？

• chartCodeAt方法返回一个整数，代表指定位置字符的Unicode编码；
• chartAt方法返回指定索引位置处的字符。如果超出有效范围的索引值返回空字符串；
• slice方法返回字符串的片段
• substring方法返回位于String对象中指定位置的子字符串。
• substr方法返回一个从指定位置开始的指定长度的子字符串。
• indexOf方法返回String对象内第一次出现子字符串位置。如果没有找到子字符串。则返回-1；
• lastIndexOf方法返回String对象中字符串最后出现的位置。如果没有匹配到子字符串，则返回-1；
• search方法返回与正则表达式查找内容匹配的第一个字符串的位置；
• concat方法返回字符串值，该值包含了两个或多个提供的字符串的连接；
• split将一个字符串分割为子字符串，然后将结果作为字符串数组返回；

null是表示"无"的对象，转为数值时为0；undefined是表示"无"的原始值，转为数值时为NaN。

• 1、变量被声明了，但没有赋值，就等于undefined。
• 2，应该提供的参数没有提供该参数等于undefined。
• 3、对象没有赋值的属性，该属性的值为undefined.

• 4、函数没有返回值时，默认返回undefined。

• 1、作为函数的参数，表示该函数的参数不是对象

• 2、作为对象原型链的终点。

29、new操作符具体干了什么呢？

• 1、创建一个空对象，并且this变量引用该对象，同时还继承了该函数的原型。
• 2、属性和方法被加入到this所引用的对象中。
• 3、新创建的对象由this所引用，并且最后隐式的返回this。

json（JavaScript Object Notation）是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单，易于读写，占用带宽小

• 1、apply()函数有两个参数：第一个参数是上下文，第二个参数是参数组成的数组。如果上下文是null，则使用全局对象代替。
• 2、call()的第一个参数是上下文，后续是实例传入的参数序列。

• 1、创建XMLHttpRequest对象，也就是创建一个异步调用对象。
• 2、创建一个新的HTTP请求，并指想向该HTTP请求的方法、URL及验证信息。
• 3、设置响应HTTP请求状态变化的函数。
• 4、发送HTTP请求。
• 5、获取异步调用返回的数据。

js延迟加载的方式有哪些？

• defer和async，动态创建DOM方式（用得最多），按需异步载入js

• 简单的说类是对象的模板。
• 在js中没有类，所以在js中所谓的类就是构造函数，对象就是有构造函数创建出来的实例对象。面向对象就是使用面向对象的方式处理问题，面向对象是向过程进行封装。
• 对象的概念，面向对象编程的程序实际就是多个对象的集合，我们可以把所有的事物都抽象成对象，在程序设计中可以看作：对象=属性+方法。属性就是对象的数据，而方法就是对象的行为
• 类的概念，类是对象的模板，而对象是类的实例化。举个例子，汽车设计图可以看作是类，而具体的汽车就是对象。再比如有一个类是表示人，然后可以通过人这个模板来实例化出张三，李四...

• 抽象性，需要通过核心数据和特定环境才能描述对象的具体意义
• 封装性，封装就是讲数据和功能组合到一起，在js中对象就是键值对的集合，对象将属性和方法封装起来，方法将过程封装起来
• 继承性，将别人的属性的方法成为自己的，传统继承基于模板（类），js中继承基于构造函数