1、 请简述一下js原型链
原型链是Javascript实现类的底层原理，是一种继承机制。说到继承，这起源于
JAVA和C++的概念。上述两种语言的继承，本质上是一种拷贝行为，将父类的方法拷贝给子类供其使用。但是JS中，子类的
.prototype对象，通过原型链与父类的.prototype对象形成一条查询管道，如果子类中没有，通过管道返回到父类中寻找，一直回溯到Object.prototype为止。比起拷贝继承，这种原型链形式，更加节省内存。另外由于javasctipt的面向对象
object orientedOO，实际上叫做object linked other objectOLOO更为准确。
2、 在原型链上Object再往上是什么？
Object.prototype是原型链的终点了。
3、 __proto__ 和prototype分别指什么？哪种情况下__proto__和prototype的指向是同一个？
考察的问题：dunder和prototype的指向。通过例子来说明：
function Workshop(teacher){ this.teacher = teacher; } Workshop.prototype.ask = function (question){ console.log(this.teacher,question); } let deepJS = new Workshop("Kyle"); let reactJS = new Workshop("Suzy"); deepJS.ask("Is prototype a class?"); reactJS.ask("Isn't prototype ugly?");
- 解析本段代码，需要了解原型链的布线是什么样的
image
子类对象通过__proto__指向父类的对象，红色箭头；函数通过prototype指向同级对象，绿色右箭头。本例子中：deepJS.__proto__ == Workshop.prototype;上面的原型链布线图非常的重要，请多看几遍好好理解
4、 new生成了一个对象的过程（核心return this）
- new关键字生成对象分为4个步骤
- 生成一个空白新对象
this = {}。this绑定目前的execution context。- 创建回溯链接，
__proto__: Car.prototype。- 返回一个新对象出来
return this。var Car = function(loc){ this = Object.create(Car.prototype); this.loc = loc; return this; } Car.prototype.move = function(){ this.loc++; }
new关键字出现的话，下面的代码就可以删除掉。new => this = Object.create(yourfunc.prototype); return this;
5、 new和Object.create的区别
new和Object.create完成的基本功能是一样的。但是new是与函数配对组合对象下的prototype产生绑定，而Object.create需要指定你要绑定的对象。表现出来的后果就是，new创建的对象享受了函数的constructor属性，也就是所谓的拥有构造函数，其实根本就只是绑定到了function的组合对象上而已这么简单。下面使用实例论证：function Car(loc){ this.loc = loc; } Car.prototype.move = function(){ this.loc++; } function Van(loc){ Car.call(this,loc); } var Van.prototype = Object.create(Car.prototype); let amy = new Van(1); console.log(amy.constructor);
amy.constructor指向的不是Van，而是Car，因为Van.prototype没有通过new与Van.constructor创建好连接，所以要向上回溯找到具有constructor函数Car.prototype。
- 要注意的思维陷阱：
Car的constructor函数在Car里。不对，在Car.prototype里。Car.prototype天生就与Car有这Car.prototype.constructor = Car的链接关系。不对，Car.prototype只是默认开辟的一块存储空间，是new创建了这种指向关系。Object.protoype.constructor = object除外，这是顶层设计。
6、 js的this理解， 如何改变this的指向
- this的理解
要判断
this的指向，需要明确的是含有this的函数在哪里进行了调用。
this = the called Object。
- 更改this的指向
隐性更改的话变换调用的Object即可，显性更改的话使用call、apply、bind函数override掉the called Object。
call、apply、bind
这三个函数都是Function的原生函数，存储在Function.prototype下面。都是用来复写（override）this的函数，传入的参数是要绑定的对象。call和apply用法基本一致，apply传入参数数组而已。bind则返回一个函数。
更多参考>>object.funcHasThis.call(anotherObject, arg1, arg2); object.funcHasThis.apply(anotherObject, ...args); const laterExecution = object.funcHasThis.bind(anotherObject); laterExecution();
- this会在什么情况下丢失
混乱情况经常发生在把
this作为回调函数的传参时，很难判断到底谁才是真正的调用者。解决方案用call或这bind，经典的this绑定丢失案例：function foo(){ console.log(this.a); } let obj = { a:2, foo:foo } const a = "oops,global"; setTimeout(obj.foo,100);//setTimeout的伪代码 function setTimeout(obj.foo,ms){ delayfunc(ms); //obj.foo只是一个存储地址,里面储存的是foo (function foo(){ console.log(this.a); })() }
setTimeout内部this指向默认的global，判断发生绑定丢失，解决方案：obj.foo.bind(obj);为了方便判断，我总结：出现了
{{this}}和this.this.的状况会出现绑定丢失。
7、 js的继承？实现方法？
箭头函数的用法没有什么好说的，主要比较麻烦的事箭头函数的this指向谁的问题。
1． 先弄清楚function情况下的this: 遵循隐式绑定，谁调用绑定谁，默认绑定global
2． 箭头函数比较妙了，绑定所在scope上下文中的对象。例子：下面代码中的this等于谁
function userCreate(name,score){ this.name = name; this.score = score; } userCreate.prototype.increment = function(){ function add (){ this.score++; } add(); } let user1 = new userCreator('Eva',9); user1.increment()this = global
function userCreate(name,score){ this.name = name; this.score = score; } userCreate.prototype.increment = function(){ const add =()=>{ this.score++; } add(); } let user1 = new userCreator('Eva',9); user1.increment()this = user1, increment调用时，开辟的execution context中，this=user1，箭头函数绑定的不是它的调用，而是在execution context中的this值。
如果不了解函数的执行过程，包括execution context，scope等概念，理解箭头函数的绑定会比较的混乱，推荐https://medium.com/@js_tut/execution-context-the-call-stack-d1fbe34f6fe9补习一下概念。
- 那么箭头函数怎么用？
箭头函数日常的用法跟ES5没有什么不一样。但是在对象生成的时候尽量不要使用箭头函数，使用统一的ES5标准，不然自己会被自己搞晕。但在对象中有一种情况要使用箭头函数，但就是在写子方法的时候：如上述的第二部分的代码。
8、 js的继承？实现方法？
Js的继承说到底，是委托查找。经典的实现方法是
原型类，变体可以使用委托设计模式，ES6中加了class语法糖，但是本质是别人已经把背后特别丑的原型类包了起来而已。个人习惯使用ES5的语法，虽然丑但调试起来比较方便，另外我觉得这比较符合JavaScript的DNA，ES6这个语法在我看来是一场粉饰太平的迎合。个人观点仅供参考。
- 原型类
function Workshop(teacher){ this.teacher = teacher; } Workshop.prototype.ask = function (question){ console.log(`${this.teacher},ask: ${question}`); } //继承部分 function AnotherWork(teacher){ Workshop.call(this,teacher); } AnotherWork.prototype = Object.create(Worksop.prototype); //多态 AnotherWork.prototype.speak = function(question){ this.ask(question.toUpperCase()); }
- ES6语法糖
class Workshop{ constructor(teacher) { this.teacher = teacher; } ask(question){ console.log(`${this.teacher},ask: ${question}`); } } //继承部分 class AnotherWork extends Workshop{ constructor(teacher){ super(teacher); } speak(question){ this.ask(question.toUpperCase()); } }
- 委托类
var Workshop{ setTeacher(teacher){ this.teacher = teacher; }, ask(question){ console.log(`${this.teacher},ask: ${question}`); } } //将Workshop assign 给 AnotherWork var AnotherWork = Object.assign( Object.create(Workshop), { speak(question){ this.ask(question.toUpperCase()); } }); //应用 let deepJS = Object.create(AnotherWork); deepJS.setTeacher("Kyle"); deepJS.speak("Hello oloo?");委托类的效率和灵活性是要比继承类都好的，但是继承类的可读性更好，在项目维护的时候，可读性要高于效率。
网友评论