2020前端面试（十二）- 作用域与原型链
点这里，欢迎关注
文章目录
- 一. 作用域相关
-
-
- 1.js的编译时与运行时
- 2.执行环境（词法作用域）与作用域链
- 3.函数声明，函数表达式，匿名函数，立即执行函数：
- 4.什么是闭包
- 5.立即执行函数IIFE
- 6.闭包有什么作用
- 7.闭包在实际中的应用：
-
- （1）定时器
- （2）事件监听器
- （3）单例模式
- （4）js的节流和防抖
- （5）如何实现一个私有变量，用getName方法可以访问，不能直接访问
- （6）实现一个once函数(传入函数参数)，使其只能执行一次
-
- 二.JS中的垃圾回收机制
- 三. 原型链相关
-
- 1.讲一讲js原型链，原型链的顶端是什么？Object的原型是什么？Object的原型的原型是什么？
- 2.在数组原型链上实现删除数组重复数据的方法：
- 3.js的new操作符做了哪些事情:
- 4.实现一个new :
- 5.this的指向问题：
- 6.改变函数内部this指向的方法：
- 7.实现一个call函数：
- 8.实现一个apply函数：
- 9.实现一个bind函数：
- 10.Function.__proto__是什么？
- 11.js实现继承的几种方式：
-
- ① 原型链继承
- ② 构造继承
- ③ 实例继承
- ④ 拷贝继承：
- ⑤ 组合继承：
- ⑥ 寄生组合继承(:star: )：
- ⑦ ES6中的class：
一. 作用域相关
1.js的编译时与运行时
https://www.cnblogs.com/pianruijie/p/11454598.html
https://segmentfault.com/a/1190000018001871
https://segmentfault.com/a/1190000000533094
https://www.cnblogs.com/lulin1/p/9712311.html
http://www.frontopen.com/1702.html
js的执行总共有三个过程：语法分析 --> 预编译（词法分析） --> 解释执行
1.语法分析：
- 这个阶段会检测js代码是否存在语法错误。
- 还会构造出一颗抽象语法树（AST）
2.预编译阶段：（在进入执行环境时即进入到了预编译阶段）
- 预编译分为两种：
- 进入全局执行环境时的预编译：
- 创建一个全局对象
- 查找全局变量声明（包括隐式全局变量声明），变量名作全局对象的属性，值为undefined。
- 查找函数声明，函数名作为全局对象的属性，值为函数引用。
- 进入函数执行环境时的预编译：
- 创建一个活动对象
- 首先会为该活动对象初始化一个arguments属性，里面包含了实参的值。
- 查找函数形参，添加在变量对象上，如果有对应的实参，则将实参的值赋给它，否则取值为undefined
- 查找变量声明，将变量名作为变量对象的属性，值为undefined。
- 查找函数声明，函数名作为变量对象的属性，值为函数引用
- 然后会创建该执行环境中的作用域链，该作用域链是一个链表的结构，作用域链的前端，始终都是当前执行环境的变量对象。如果这个环境是函数，则将其活动对象（activation object）作为变量对象。作用域链中的下一个变量对象来自父级的执行环境，而再下一个变量对象则来自再下一个执行环境，一直延续到全局执行环境的变量对象；
- 预编译阶段大部分会发生在函数执行前
- 进入全局执行环境时的预编译：
3.解释执行阶段
2.执行环境（词法作用域）与作用域链
01.执行环境：
作用域模型有两种：词法作用域（静态作用域）和动态作用域。
词法作用域是指在词法阶段（预编译）定义的作用域，说它是静态的是因为代码在执行时，其词法作用域就已经确定了，词法分析器处理代码时其词法作用域是不变的。
词法作用域也称为执行环境，其定义了变量或函数有权访问的其他数据，决定了它们各自的行为。每个执行环境都有一个与之关联的变量对象。环境中定义的所有变量和函数都保存在这个对象上。
02.全局执行环境：
全局执行环境是最外围的一个执行环境。根据 ECMAScript 实现所在的宿主环境不同，表示执行环
境的对象也不一样。在 Web 浏览器中，全局执行环境被认为是 window 对象。因此所有全局变量和函数都是作为window对象的属性和方法创建的。
03.作用域的分类：
**ES5：**只存在全局作用域和局部作用域（函数作用域）。局限：在if和for循环中声明的变量会变成全局变量；
ES5中通过立即执行函数可以模拟一个块级作用域，封装一些临时变量。
**ES6：**新增了块级作用域的概念，凡是{}包起来的都具有块级作用域，let,const声明的变量只能在块级作用域中使用。
有了块级作用域，就可以不用立即执行函数了。
04.作用域毁销毁：
某个执行环境中的所有代码执行完毕后，该环境被销毁，保存在其中的所有变量和函数定义也随之销毁（全局执行环境直到应用程序退
出——例如关闭网页或浏览器——时才会被销毁）。
05.执行流机制：
每个函数都有自己的执行环境（也就是有与之相关的变量对象）。当执行流进入一个函数时，会立马创建该函数的执行环境，该执行环境会被推入一个环境栈中。
**而在函数执行之后，栈将其环境弹出，把控制权返回给之前的执行环境。**ECMAScript 程序中的执行流
正是由这个方便的机制控制着。
06.作用域链：
当代码在一个环境中执行时，会创建变量对象的一个作用域链（scope chain）。
作用域链的用途，是保证对执行环境有权访问的所有变量和函数的有序访问。
作用域链的前端，始终都是当前执行的代码所在环境的变量对象。如果这个环境是函数，则将其活动对象（activation object）作为变量对象。活动对象在最开始时只包含一个变量，即 arguments 对象（这个对象在全局环境中是不存在的）。作用域链中的下一个变量对象来自包含（外部）环境，而再下一个变量对象则来自下一个包含环境。这样，一直延续到全局执行环境；
全局执行环境的变量对象始终都是作用域链中的最后一个对象。
07.变量的查找规则：
沿着作用域链一级一级向上查找。
08.作用域链与原型链的区别：
作用域链是针对变量的查找规则，原型链是针对构造函数的查找规则。
3.函数声明，函数表达式，匿名函数，立即执行函数：
https://www.cnblogs.com/lichunyan/p/7894867.html
//函数声明，存在函数提升
fn();
function fn(){
console.log(111)
};
function (){
}() //这是错误的语法，因为函数声明时必须带有函数名
//函数表达式
//函数表达式是作为表达式语句的一部分存在；当它没有函数名称的时侯，则称为匿名函数；
let fn2=function(){
console.log(111)
}
fn2();
let fn3=function fn(){
consploe.log(222)
}
fn3()
//只有函数表达式才能被执行符号()执行
+function test(){
console.log(222)
}()
//里面的funciton会被解析为一个函数表达式，所以立即执行函数也被称为立即执行的函数表达式
(function(){
})()
4.什么是闭包
function makeFunc() {
var name = "Mozilla";
function displayName() {
alert(name);
}
return displayName;
}
var myFunc = makeFunc();
myFunc();
闭包：
闭包是一种现象，由于存在作用域链的缘故，内部执行环境可以通过作用域链访问到外部执行环境的变量，闭包的产生是由于内部执行环境引用 了外部执行环境的变量，导致该变量在外部函数执行后其引用次数不为0，所以垃圾回收机制不会对该变量进行回收。所以可以一直访问并修改该变量。
5.立即执行函数IIFE
立即执行函数其实相当于立即执行的函数表达式。因为立即执行函数是由两个括号组合起来的，js引擎遇到第一个括号时会将其解析为函数表达式，然后遇到第二个括号时就会立即执行。
有什么用：
因为立即执行函数会开辟一个作用域**，**所有可以避免全局变量的污染。比如我们想让一个变量常驻在内存中，就可以在立即执行函数包裹某个函数，让这个函数引用立即执行函数中的变量，这样就会形成一个闭包，该变量不会被垃圾回收机制回收。
应用：
1.循环绑定事件时，为每一次循环绑定自己对应的索引值。（立即执行函数与闭包的结合，让立即执行函数内部的函数引用其变量）
for (var i = 0; i < btns.length; i++) {
((i) => {
btns[i].onclick = function () {
console.log(i);
};
})(i);
}
2.定时器，为每一个定时器函数绑定自己对应的索引值。（立即执行函数与闭包的结合）
for (var i = 0; i < 10; i++) {
((i) => {
setTimeout(() => {
console.log(i);
}, 1000);
})(i);
}
原理都是通过立即执行函数开辟新的作用域，让内部的函数引用立即函数的变量，形成闭包，从而可以保证每一个定时器函数引用的变量值都是不同的。
3.封装js库（开辟一个新的作用域，防止污染全局变量）
应用1,2属于立即执行函数与闭包的结合应用，应用3应用的是立即执行函数会开辟一个新的作用域的特性。
6.闭包有什么作用
- 保护函数中变量的安全性。
- 由于外部函数在执行后会被销毁，此时就只剩下了被内部函数引用的变量，因此该变量只能通过引用他的函数访问到。
- 利用这个特性可以实现私有属性和私有方法（见应用5）。（即只能通过特定的方式调用）
- 可以在内存中维持一个变量，利用这个特性可以实现单例模式，防抖和节流，once函数。
7.闭包在实际中的应用：
（1）定时器
（2）事件监听器
（3）单例模式
（4）js的节流和防抖
https://www.cnblogs.com/momo798/p/9177767.html
在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。
函数的防抖和节流是闭包的充分应用。
函数防抖（debounce）:
当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。
// 防抖
function debouce(fn, wait) {
let timeout = null;
return function () {
if (timeout) clearTimeout(timeout);
timeout = setTimeout(fn, wait);
};
}
// 处理函数
function handle() {
console.log(Math.random());
}
// 滚动事件
window.addEventListener("scroll", debouce(handle, 1000));
函数节流（throttle）：
当持续触发事件时，保证一定时间段内只调用一次事件处理函数。
方法一：时间戳
function throttle(fn, delay) {
let prev = Date.now();
console.log(prev);
return function () {
let now = Date.now();
if (now - prev > delay) {
fn();
prev = Date.now();
}
};
}
function handle() {
console.log(Math.random());
}
window.addEventListener("scroll", throttle(handle, 1000));
方法二：定时器
function throttle(fn, delay) {
let timer = null;
return function () {
if (!timer) {
timer = setTimeout(function () {
fn();
timer = null;
}, delay);
}
};
}
function handle() {
console.log(Math.random());
}
window.addEventListener("scroll", throttle(handle, 1000));
方法三：setTimeout+requestAnimationFrame（看看就好）
//requestAnimationFrame可以保证每次重绘最多调用一次回调函数。因此可以用来实现节流。
let enabled = true;
function fn() {
console.log(Math.random());
}
window.addEventListener("scroll", () => {
//设置标记变量，可以过滤掉多余requestAnimationFrame的调用
if (enabled) {
enabled = false;
window.requestAnimationFrame(fn);
//手动限制操作执行的频率
window.setTimeout(() => {
enabled = true;
}, 1000);
}
});
节流与防抖的区别：
函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。
比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。
（5）如何实现一个私有变量，用getName方法可以访问，不能直接访问
利用闭包来实现：
function createPerson(name) {
var name = name;
function Person() {
}
Person.prototype.getName = function () {
return name;
};
Person.prototype.setName = function (value) {
name = value;
};
return Person;
}
let Person = createPerson("liu");
let person = new Person();
console.log(person.name); //undefined
console.log(person.getName()); //liu
person.setName("haha");
console.log(person.getName()); //haha
let Person2 = createPerson("liu1");
let person2 = new Person2();
console.log(person2.getName()); //liu1
（6）实现一个once函数(传入函数参数)，使其只能执行一次
利用闭包来解决，在函数的开始设置一个标记值，当执行完传入的函数后，更改这个标记值。
function sing(arg1, arg2) {
console.log(`i like the singer ${
arg1} and ${
arg2}`);
}
function once(func) {
let b = true;
return function () {
if (b) {
func.apply(null, arguments);
b = false;
} else {
console.log(undefined);
}
};
}
// sing("adele", "wangfei");
let fn = once(sing);
fn("adele", "wangfei"); //i like the singer adele and wangfei
fn("adele", "wangfei"); //undefined
fn("adele", "wangfei"); //undefined
该函数与防抖和节流原理相同，都是利用闭包来实现。
二.JS中的垃圾回收机制
js内存的分配以及无用内存的回收都实现了自动管理。垃圾回收机制的原理是找出不再继续使用的变量，然后释放其占用的内存。垃圾收集器会按照固定的时间间隔周期性地执行这一操作。
垃圾回收方式有两种：
标记清除：
这是最常见的垃圾回收方式，当变量进入环境时，就标记这个变量为”进入环境“,从逻辑上讲，永远不能释放进入环境的变量所占的内存，只要执行流程进入相应的环境，就可能用到他们。当离开环境时，就标记为离开环境。
垃圾回收器在‘运行的时候’会给存储在内存中的所有变量都加上标记，然后去掉环境变量中的变量，以及被环境变量中的变量所引用的变量（条件性去除标记），然后再删除所有被标记的变量，最后垃圾回收器，完成了内存的清除工作，并回收他们所占用的内存。
引用计数法：
另一种不太常见的方法就是引用计数法，引用计数法的含义就是跟踪记录每个值被引用的次数。
当声明了一个变量，并用一个引用类型的值赋值给该变量，则这个值的引用次数为1。如果一个值的引用次数是0，就表示这个值不再用到了，因此可以将这块内存释放。
var arr=[1,2,3,4];
arr=null;//解除arr对[1,2,3,4]引用，这块内存就可以被垃圾回收机制释放了。
引用计数法存在一个问题：循环引用。
function problem() {
var objA = new Object();
var objB = new Object();
objA.someOtherObject = objB;
objB.anotherObject = objA;
}
循环引用导致的问题就是当函数执行完毕后，这两个对象的计数均不为0，如果大量存在这种相互引用，就会导致内存泄漏。
三. 原型链相关
1.讲一讲js原型链，原型链的顶端是什么？Object的原型是什么？Object的原型的原型是什么？
原型对象，对象原型，实例对象的区别：
构造函数默认带有一个prototype属性，这个的属性值是一个对象，即原型对象。
原型对象上有一个constructor属性，指向了这个构造函数。
由构造函数创建的实例对象身上有一个__proto__属性，这个属性指向了构造函数的原型对象，这个属性也被称为对象原型。
原型链：
实例对象的__proto__指向了构造函数的原型对象；
构造函数的原型对象的__proto__指向了Object的原型对象；
Object的原型对象的__proto__指向为null；
所以，原型链顶端是Object构造函数的原型对象。
对象身上属性和方法的查找规则：
依据原型链逐层向上查找。
利用原型链实现继承：
ES6之前JS没有类和继承的概念，但可以通过原型来实现继承。
让子构造函数的原型对象指向父构造函数的实例对象，这样当子构造函数不存在某个方法时，就会去原型对象上找，也即父实例对象，然后再找不到则会去父构造函数的原型对象上找。
注意1：之所以这里子构造函数的原型对象不直接指向父构造函数，是因为如果改变该原型对象，实则更改的是父构造函数的原型对象。
注意2：将原型对象指向父构造函数的实例对象后，原来原型对象上的constructor属性就被覆盖了，因此需要单独为其添加constructor属性，并指向子构造函数。
2.在数组原型链上实现删除数组重复数据的方法：
直接在原数组构造函数的原型对象上添加去重函数即可：
Array.prototype.cut=function(){
let obj={
}
for(let i=0;i<this.length;i++){
let tmp=this[i];
if(obj[tmp]){
this.splice(i,1);
i--;
}else{
obj[tmp]=tmp;
}
}
obj=null;
return this;
}
let arr=[1,2,3,4,3,4,5,6,1];
let newArr=arr.cut();
console.log(newArr)//[1, 2, 3, 4, 5, 6]
Array.prototype.cut=function(){
return [...new Set(this)];
}
let newArr=[11,22,33,44,55,22,33].cut();
console.log(newArr);//[11, 22, 33, 44, 55]
3.js的new操作符做了哪些事情:
https://blog.csdn.net/lxcao/article/details/52792466
共四步：
1、创建一个空对象 obj
2、设置原型链 obj.__proto__=Func.prototype
3、调用 Func.apply(obj,arguments)，让Func中的this指向创建的这个对象，并执行Func的函数体。
4、判断Func的返回值类型。（默认是返回前面创建的对象obj）
如果是值类型，返回原obj。如果是引用类型，就返回这个引用类型的对象。
4.实现一个new :
//这里体现了工厂模式的设计思想，ObjectFactory相当于一个工厂，设计了一个统一的接口，会根据参数生成对应的实例对象。
function Person(name, age) {
this.name = name;
this.age = age;
}
function ObjectFactory() {
// 创建一个空对象 obj
var obj = {
};
var constructor = Array.prototype.shift.call(arguments);
// 设置原型链 obj.__proto__=Func.prototype
obj.__proto__ = constructor.prototype;
// 调用 Func.apply(obj,arguments)，让Func中的this指向创建的这个对象，并执行Func的函数体。
var result = constructor.apply(obj, arguments);
// 判断Func的返回值类型。如果是值类型，返回原obj。如果是引用类型，就返回这个引用类型的对象。
return typeof result === "object" ? result : obj;
}
var person = ObjectFactory(Person, "liu", 21);
console.log(person); //Person { name: 'liu', age: 21 }
5.this的指向问题：
this的7种绑定：
1.普通函数 window
2.对象的方法 对象
3.构造函数 实例对象
4.事件处理函数 事件源
5.定时器函数 window
6.立即执行函数 window
7.箭头函数（神仙棒，搅屎棍，可能会改变以上所以情况中的this指向，所以在使用箭头函数的时候，需要擦亮双眼看清this指向的到底是谁）
箭头函数中的this是静态的，也就是作用域是不会被改变的，始终指向的是该箭头函数声明时所在的真正的执行环境
//实例1：
let o = {
fn: function () {
setTimeout(() => {
console.log(this);
});
},
};
o.fn();//{fn: ƒ}
//实例2：
function fn2() {
setTimeout(() => {
console.log(this);
});
}
fn2();//window
//实例3：
window.name = "liu1";
let func5 = () => {
console.log(this.name);
};
// 箭头函数中this的指向不会改变
func5.call(obj); //liu1
//实例4：
var a = 0;
function foo(){
console.log(this.a);
};
var obj = {
a : 2,
foo:foo
}
setTimeout(obj.foo,100);//0
//实例4等价于：
var a = 0;
setTimeout(function foo(){
console.log(this.a);
},100);//0
6.改变函数内部this指向的方法：
| call | apply | bind | |
|---|---|---|---|
| 是否会立即执行函数 | 会 | 会 | 不会，但会返回一个新的函数 |
| 传递的第二个参数 | arg1,arg2的形式 | 数组的形式 | arg1,arg2的形式 |
| 实际应用场景 | 实现属性的继承 | 常跟数组有关系，可以借助Math对象查找数组的最大值最小值 | 应用1：定时器函数中默认的this为window，可以通过bind指定其中的this,好处是不会立即调用该函数 应用2：适用于任何想要改变this指向，但不想立即执行的情况，比如绑定事件处理函数时，可以通过bind改变this的指向。 |
7.实现一个call函数：
//原理：原函数中this的指向是由调用函数的上下文环境决定的，如果将上下文环境改为目标对象，则最终函数内部this指向的就是该目标对象
//简单原理:
function fn1() {
console.log(this.name);
}
var name = "liu";
var obj = {
name: "liu2",
};
obj.fn = fn1;
obj.fn(); //liu2
//具体实现：
function fn1() {
console.log(this.name);
console.log("参数为", ...arguments);
}
var name = "liu";
var obj = {
name: "liu2",
};
Function.prototype.my_call = function (obj) {
//细节点1，判断是否传入第一个参数
obj = obj || window;
//核心：将原函数挂载在目标对象的一个属性上，通过该对象.属性调用该函数时函数内部的指向的就是该目标对象。
obj.fn1 = this;
//var rs = obj.fn1(...[...arguments].slice(1));
var str = "obj.fn(";
for (var i = 1; i < arguments.length; i++) {
str += arguments[i] + ",";
}
str = str.substring(0, str.length - 1);
str += ")";
var rs = eval(str);
//细节点2：删除添加在原对象上的函数属性，不留痕迹，彻彻底底。
delete obj.fn1;
return rs;
};
fn1.my_call(obj, 1, 2, 3); //liu2 参数为 1, 2, 3
fn1.my_call(); //liu 参数为
8.实现一个apply函数：
//原理与实现call函数类似，都是通过改变原函数的调用环境来实现。
function fn() {
console.log(this.name);
console.log("传入的参数为", ...arguments);
}
var name = "liu";
var obj = {
name: "xiao",
};
// fn.apply(obj, [1, 2, 3]);//xiao
Function.prototype.my_apply = function (obj, args) {
obj = obj || window;
//核心与call方法的实现一致
obj.fn = this;
//细节：需要根据第二个参数来决定函数的调用方式
if (args && args.length) {
var str = "obj.fn(";
for (var i = 0; i < args.length; i++) {
str += args[i] + ",";
}
str = str.substring(0, str.length - 1);
str += ")";
var rs = eval(str);
} else {
var rs = obj.fn();
}
delete obj.fn;
return rs;
};
fn.my_apply(obj, [1, 2, 3]);
fn.my_apply(obj);
9.实现一个bind函数：
function fn() {
console.log(this.name);
console.log("传入的参数为", ...arguments);
}
var name = "liu";
var obj = {
name: "liu2",
};
// var newFn = fn.bind(obj, 1, 2, 3, 4);
// newFn(); //liu2
Function.prototype.my_bind = function (obj) {
obj = obj || window;
//核心1：将原函数绑定在目标对象的属性上
obj.fn = this;
const args = arguments;
//核心2；利用闭包返回一个函数
return function () {
var str = "obj.fn(";
for (var i = 1; i < args.length; i++) {
str += args[i] + ",";
}
str = str.substring(0, str.length - 1);
str += ")";
var rs = eval(str);
return rs;
};
};
var newFn = fn.my_bind(obj, 1, 2, 3, 4);
newFn(); //liu2 传入的参数为 1 2 3 4
10.Function.__proto__是什么？
表示Function构造函数的原型对象，指向的是Object构造函数的原型对象
Object.getPrototypeOf：用于获取对象的原型对象，可以用来代替__proto__；因为__proto__中的下划线可能存在语义性的问题，该属性可能还存在兼容性的问题。
let object = {
};
console.log(Object.getPrototypeOf(object) === object.__proto__); //true
11.js实现继承的几种方式：
function Animal(name, size, likes) {
this.name = name || "Animal";
this.size = size || "small";
this.sleep = function () {
console.log(this.name + " is sleeping");
};
this.likes = likes || [];
}
Animal.prototype.eat=function(food){
console.log(this.name+'is eating '+food);
}
① 原型链继承
//核心： 将父类的实例作为子类的原型
//优点：简单，容易实现
//缺点：无法实现多继承，无法向父类构造函数传参；原型对象上的所有属性被所有实例共享，只有一份
function Cat() {
}
Cat.prototype = new Animal(); //核心代码
Cat.prototype.name = "tom";
var cat = new Cat();
console.log(cat.name);
cat.sleep();
console.log(cat instanceof Cat); //true
console.log(cat instanceof Animal); //true 即子类的实例，也是父类的实例
var cat2 = new Cat();
cat.likes.push("play");
console.log(cat2.likes); //[ 'play' ]
② 构造继承
//优点：可以向父类传递参数，可以实现多继承（call多个父类实例）
//缺点：
//实例并不是父类的实例，只是子类的实例
//只能继承父类的实例属性和方法，不能继承原型属性/方法
function Cat(name) {
Animal.call(this,name); //核心代码
}
var cat = new Cat("tom");
console.log(cat.name); //tom
cat.sleep(); //tom is sleeping
③ 实例继承
// 核心：在子构造函数中创建一个父类实例，可以在上面添加子类的新特性，然后返回这个对象
// 特点：可以通过new调用，也可直接调用
// 缺点：实例是父类的实例，不是子类的实例; 不支持多继承; 而且在子构造函数的原型对象上添加方法是无效的，根据new关键字的执行过程可知。
function Cat(name) {
var instance = new Animal(); //核心代码
instance.name = name || "Tom";
return instance;
}
Cat.prototype.sing = function () {
console.log("sing a song");
};
var cat = new Cat("jim");
console.log(cat.name); //jim
cat.sleep(); //jim is sleeping
cat.sing(); // cat.sing is not a function
④ 拷贝继承：
// 利用for..in可以遍历对象的原型对象上的属性的特性
// 特点：可以多继承
// 缺点：因为存在拷贝，内存占用高；无法获取父类不可枚举的方法（for in 只能获取枚举的属性）
function Cat(name) {
var animal = new Animal();
for (key in animal) {
Cat.prototype[key] = animal[key]; //核心代码
}
Cat.prototype.name = name || "tom";
}
var cat = new Cat("jim");
console.log(cat.name);
cat.sleep();
console.log(cat instanceof Animal); //false
console.log(cat instanceof Cat); //true
⑤ 组合继承：
// 原型链继承+构造继承
// 优点：
// 弥补了原型链继承的局限性，可以传参；不存在引用属性共享的问题，因为代码1将实例属性绑定在了实例对象上，不需要再去原型对象上找属性了。
// 弥补了构造继承的局限性，可以继承原型上的属性和方法，既是子类的实例，也是父类的实例。
// 缺点：初始化了两次实例方法/属性，多消耗了一些内存
function Cat(name, size) {
Animal.call(this, name, size); //核心代码1
}
Cat.prototype = new Animal(); //核心代码2
var cat = new Cat("alice", "big");
console.log(cat.name); //alice
console.log(cat.size); //big
cat.sleep(); //alice is sleeping
⑥ 寄生组合继承(⭐️ )：
// 解决组合继承中的冗余问题，将 实例属性/方法的继承 与 原型对象上属性/方法的继承 分开
function Cat(name, size) {
Animal.call(this, name, size); //核心代码1：继承实例属性和方法
(function () {
var Super = function () {
};
Super.prototype = Animal.prototype; //核心代码2：通过寄生方式，砍掉父类的实例方法/属性，这样就不会初始化两次实例方法/属性，避免的组合继承的缺点
Cat.prototype = new Super();
})();
}
var cat = new Cat("alice", "big");
console.log(cat.name); //alice
console.log(cat.size); //big
cat.sleep(); //alice is sleeping
⑦ ES6中的class：
class Animal {
constructor(name, size) {
this.name = name;
this.size = size;
}
sing() {
console.log("sing a song");
}
}
class Cat extends Animal {
constructor(name, size) {
super(name, size);
}
eat() {
console.log("i like eating mouse");
}
}
var cat = new Cat("tom", "small");
console.log(cat); //Cat { name: 'tom', size: 'small' }
cat.sing(); //sing a song
cat.eat();
``