2021前端面试之JavaScript手写题（一）

age: 99

}

//结果

obj.myFun.myCall(db,‘成都’,‘上海’); // 德玛 年龄 99 来自 成都去往上海

obj.myFun.myApply(db,[‘成都’,‘上海’]); // 德玛 年龄 99 来自 成都去往上海

obj.myFun.myBind(db,‘成都’,‘上海’)(); // 德玛 年龄 99 来自 成都去往上海

obj.myFun.myBind(db,[‘成都’,‘上海’])(); // 德玛 年龄 99 来自 成都, 上海去往 undefined

4.寄生式组合继承

---

function Person(obj) {

this.name = obj.name

this.age = obj.age

}

Person.prototype.add = function(value){

console.log(value)

}

var p1 = new Person({name:“番茄”, age: 18})

function Person1(obj) {

Person.call(this, obj)

this.sex = obj.sex

}

// 这一步是继承的关键

Person1.prototype = Object.create(Person.prototype);

Person1.prototype.constructor = Person1;

Person1.prototype.play = function(value){

console.log(value)

}

var p2 = new Person1({name:“鸡蛋”, age: 118, sex: “男”})

5.ES6继承

---

//class 相当于es5中构造函数

//class中定义方法时，前后不能加function，全部定义在class的protopyte属性中

//class中定义的所有方法是不可枚举的

//class中只能定义方法，不能定义对象，变量等

//class和方法内默认都是严格模式

//es5中constructor为隐式属性

class People{

constructor(name=‘wang’,age=‘27’){

this.name = name;

this.age = age;

}

eat(){

console.log(${this.name} ${this.age} eat food)

}

}

//继承父类

class Woman extends People{

constructor(name = ‘ren’,age = ‘27’){

//继承父类属性

super(name, age);

}

eat(){

//继承父类方法

super.eat()

}

}

let wonmanObj=new Woman(‘xiaoxiami’);

wonmanObj.eat();

//es5继承先创建子类的实例对象，然后再将父类的方法添加到this上（Parent.apply(this)）。

//es6继承是使用关键字super先创建父类的实例对象this，最后在子类class中修改this。

6.new的实现

---

• 一个继承自 Foo.prototype 的新对象被创建。

• 使用指定的参数调用构造函数 Foo，并将 this 绑定到新创建的对象。new Foo 等同于 new Foo()，也就是没有指定参数列表，Foo 不带任何参数调用的情况。

• 由构造函数返回的对象就是 new 表达式的结果。如果构造函数没有显式返回一个对象，则使用步骤1创建的对象。

• 一般情况下，构造函数不返回值，但是用户可以选择主动返回对象，来覆盖正常的对象创建步骤

function Ctor(){

…

}

function myNew(ctor,…args){

if(typeof ctor !== ‘function’){

throw ‘myNew function the first param must be a function’;

}

var newObj = Object.create(ctor.prototype); //创建一个继承自ctor.prototype的新对象

var ctorReturnResult = ctor.apply(newObj, args); //将构造函数ctor的this绑定到newObj中

var isObject = typeof ctorReturnResult === ‘object’ && ctorReturnResult !== null;

var isFunction = typeof ctorReturnResult === ‘function’;

if(isObject || isFunction){

return ctorReturnResult;

}

return newObj;

}

let c = myNew(Ctor);

7.instanceof的实现

---

• instanceof 是用来判断A是否为B的实例，表达式为：A instanceof B，如果A是B的实例，则返回true,否则返回false。

• instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。

• 不能检测基本数据类型，在原型链上的结果未必准确，不能检测null,undefined

• 实现：遍历左边变量的原型链，直到找到右边变量的 prototype，如果没有找到，返回 false

function myInstanceOf(a,b){

let left = a.proto;

let right = b.prototype;

while(true){

if(left == null){

return false

}

if(left == right){

return true

}

left = left.proto

}

}

//instanceof 运算符用于判断构造函数的 prototype 属性是否出现在对象的原型链中的任何位置。

function myInstanceof(left, right) {

let proto = Object.getPrototypeOf(left), // 获取对象的原型

prototype = right.prototype; // 获取构造函数的 prototype 对象

// 判断构造函数的 prototype 对象是否在对象的原型链上

while (true) {

if (!proto) return false;

if (proto === prototype) return true;

proto = Object.getPrototypeOf(proto);

}

}

8.Object.create()的实现

---

• MDN文档

• Object.create()会将参数对象作为一个新创建的空对象的原型, 并返回这个空对象

//简略版

function myCreate(obj){

// 新声明一个函数

function C(){};

// 将函数的原型指向obj

C.prototype = obj;

// 返回这个函数的实力化对象

return new C()

}

//官方版Polyfill

if (typeof Object.create !== “function”) {

Object.create = function (proto, propertiesObject) {

if (typeof proto !== ‘object’ && typeof proto !== ‘function’) {

throw new TypeError('Object prototype may only be an Object: ’ + proto);

} else if (proto === null) {

throw new Error(“This browser’s implementation of Object.create is a shim and doesn’t support ‘null’ as the first argument.”);

}

if (typeof propertiesObject !== ‘undefined’) throw new Error(“This browser’s implementation of Object.create is a shim and doesn’t support a second argument.”);

function F() {}

F.prototype = proto;

return new F();

};

}

9.实现 Object.assign

---

Object.assign2 = function(target, …source) {

if (target == null) {

throw new TypeError(‘Cannot convert undefined or null to object’)

}

let ret = Object(target)

source.forEach(function(obj) {

if (obj != null) {

for (let key in obj) {

if (obj.hasOwnProperty(key)) {

ret[key] = obj[key]

}

}

}

})

return ret

}

10.Promise的实现

---

实现 Promise 需要完全读懂 Promise A+ 规范，不过从总体的实现上看，有如下几个点需要考虑到：

• Promise本质是一个状态机，且状态只能为以下三种：Pending（等待态）、Fulfilled（执行态）、Rejected（拒绝态），状态的变更是单向的，只能从Pending -> Fulfilled 或 Pending -> Rejected，状态变更不可逆

• then 需要支持链式调用

class Promise {

callbacks = [];

state = ‘pending’;//增加状态

value = null;//保存结果

constructor(fn) {

fn(this._resolve.bind(this), this._reject.bind(this));

}

then(onFulfilled, onRejected) {

return new Promise((resolve, reject) => {

this._handle({

onFulfilled: onFulfilled || null,

onRejected: onRejected || null,

resolve: resolve,

reject: reject

});

});

}

_handle(callback) {

if (this.state === ‘pending’) {

this.callbacks.push(callback);

return;

}

let cb = this.state === ‘fulfilled’ ? callback.onFulfilled : callback.onRejected;

if (!cb) {//如果then中没有传递任何东西

cb = this.state === ‘fulfilled’ ? callback.resolve : callback.reject;

cb(this.value);

return;

}

let ret = cb(this.value);

cb = this.state === ‘fulfilled’ ? callback.resolve : callback.reject;

cb(ret);

}

_resolve(value) {

if (value && (typeof value === ‘object’ || typeof value === ‘function’)) {

var then = value.then;

if (typeof then === ‘function’) {

then.call(value, this._resolve.bind(this), this._reject.bind(this));

return;

}

}

this.state = ‘fulfilled’;//改变状态

this.value = value;//保存结果

this.callbacks.forEach(callback => this._handle(callback));

}

_reject(error) {

this.state = ‘rejected’;

this.value = error;

this.callbacks.forEach(callback => this._handle(callback));

}

}

Promise.resolve

• Promsie.resolve(value) 可以将任何值转成值为 value 状态是 fulfilled 的 Promise，但如果传入的值本身是 Promise 则会原样返回它。

Promise.resolve(value) {

if (value && value instanceof Promise) {

return value;

} else if (value && typeof value === ‘object’ && typeof value.then === ‘function’) {

let then = value.then;

return new Promise(resolve => {

then(resolve);

});

} else if (value) {

return new Promise(resolve => resolve(value));

} else {

return new Promise(resolve => resolve());

}

}

Promise.reject

• 和 Promise.resolve() 类似，Promise.reject() 会实例化一个 rejected 状态的 Promise。但与 Promise.resolve() 不同的是，如果给 Promise.reject() 传递一个 Promise 对象，则这个对象会成为新 Promise 的值。

Promise.reject = function(reason) {

return new Promise((resolve, reject) => reject(reason))

}

Vue

• 什么是MVVM？

• mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？

• 组件之间的传值？

• Vue 双向绑定原理

• 描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？

• 虚拟 DOM 实现原理

• Vue 中 key 值的作用？

• Vue 的生命周期

• Vue 组件间通信有哪些方式?

• vue 中怎么重置 data?

• 组件中写 name 选项有什么作用？

• Vue 的 nextTick 的原理是什么？

• Vuex 有哪几种属性?