动画:《大前端吊打面试官系列》 之原生 JavaScript 精华篇( 五 )


很多应聘者喜欢这样回答,“函数里套一个函数”,但是面试官更喜欢下面的回答,因为可以继续为你挖坑 。
函数执行,形成一个私有的作用域,保护里边的私有变量不受外界的干扰,除了保护私有变量外,还可以保存一些内容,这样的模式叫做闭包 。
闭包的作用有两个,保护和保存 。
保护的应用
保存的应用
面试官:循环绑定事件引发的索引什么问题?怎么解决这种问题?
// 事件绑定引发的索引问题var btnBox = document.getElementById('btnBox'),inputs = btnBox.getElementsByTagName('input')var len = inputs.length;for(var i = 0; i < 1en; i++){inputs[i].onclick = function () {alert(i)}}
闭包剩余的部分,俺在之前的文章已经总结过,俺就不复制过来了,直接传送过去~ 动画:什么是闭包?
原型和原型链
面试官:什么是原型?什么是原型链?如何理解?
**原型:**每个 JS 对象都有属性,这个属性指向了原型 。跟俺去看看,
再来一个,
我们可以看到,只要是对象类型,都会有这个 属性,这个属性指向的也是一个原型对象,原型对象也是对象呀,肯定也会存在一个属性 。那么就形成了原型链,定义如下:
原型链:原型链就是多个对象通过的方式连接了起来形成一条链 。
原型和原型链是怎么来的呢?如果理清原型链中的关系呢?
对于原型和原型链的前世今生,由于篇幅过大,俺的传送门~ 图解:告诉面试官什么是 JS 原型和原型链?
PS:下面的看不懂,一定去看文章哦!

动画:《大前端吊打面试官系列》 之原生 JavaScript 精华篇

文章插图
再往深处看,他们之间存在复杂的关系,但是这些所谓的负责关系俺已经总结好了,小二上菜
这张图看起来真复杂,但是通过下边总结的,再来分析这张图,试试看 。
面试官: 的原理是什么?
之前留了一个小问题,总结了上述的原型和原型链之后,的原理很容易理解 。
的原理是通过判断该对象的原型链中是否可以找到该构造类型的类型 。
function Foo(){}var f1 = new Foo();console.log(f1 instanceof Foo);// true
继承
面试官:说一说 JS 中的继承方式有哪些?以及各个继承方式的优缺点 。
经典继承(构造函数)
/ 详细解析//1、当用调用 call 方法时,this 带边 son。//2、此时 Father 构造函数中的 this 指向 son 。//3、也就是说 son 有了 colors 的属性 。//4、每 new 一个 son ,都会产生不同的对象,每个对象的属性都是相互独立的 。function Father(){this.colors = ["red","blue","green"];}function Son(){// this 是通过 new 操作内部的新对象 {} ,// 此时 Father 中的 this 就是为 Son 中的新对象{}// 新对象就有了新的属性,并返回得到 new 的新对象实例// 继承了Father,且向父类型传递参数Father.call(this);}let s = new Son();console.log(s.color)
**① 基本思想:**在子类的构造函数的内部调用父类的构造函数 。
② 优点:
③ 缺点:
组合继承
function Father(name){this.name = name;this.colors = ["red","blue","green"];}// 方法定义在原型对象上(共享)Father.prototype.sayName = function(){alert(this.name);};function Son(name,age){// 子类继承父类的属性Father.call(this,name);//继承实例属性,第一次调用 Father()// 每个实例都有自己的属性this.age = age;}// 子类和父类共享的方法(实现了父类属性和方法的复用)Son.prototype = new Father();//继承父类方法,第二次调用 Father()// 子类实例对象共享的方法Son.prototype.sayAge = function(){alert(this.age);}var instance1 = new Son("louis",5);instance1.colors.push("black");console.log(instance1.colors);//"red,blue,green,black"instance1.sayName();//louisinstance1.sayAge();//5var instance1 = new Son("zhai",10);console.log(instance1.colors);//"red,blue,green"instance1.sayName();//zhaiinstance1.sayAge();//10