Web前端开发JavaScript面试题合集(二)_惠州前端培训学校

今天我们跟着惠州北大青鸟老师一起来学习一下Web前端开发JavaScript面试题合集(二)，希望对大家学习有帮助。

一、怎么判断一个object是否是数组

· 方法一

使用 Object.prototype.toString 来判断是否是数组

function isArray(obj){

return Object.prototype.toString.call( obj ) === '[object Array]';

}

这里使用call来使 toString 中 this 指向 obj。进而完成判断

· 方法二

使用 原型链 来完成判断

function isArray(obj){

return obj.__proto__ === Array.prototype;

}

基本思想: 实例如果是某个构造函数构造出来的那么 它的__proto__是指向构造函数的 prototype属性

· 方法三

利用JQuery, 利用JQuery isArray 的实现其实就是方法1。

function isArray(obj){

return $.isArray(obj)

}

二、继承有哪些方式

· ES6中的class继承

· 原型继承

· 构造继承

· 寄生组合式继承

· 实例继承

简单介绍一下前两种方式, 后面几种继承方式大家可以自行上网查找.

1. ES6中的class继承

class Animal {

constructor(name) {

this.name = name;

};

eat() {

console.log(this.name + '正在吃东西');

};

}

//继承动物类

class Cat extends Animal {

catchMouse(){

console.log(`${this.name}正在捉老鼠`);

}

}

var cat= new Cat('Tom猫');

cat.catchMouse();// Tom猫正在捉老鼠

细心的同学可能会发现, 在Cat 类中没有构造函数, 这里有一个小的知识点，就是ES6的继承方法中如果子类没有写构造函数的话就一般默认添加构造。举个例子。

class Cat extends Animal{

}

// 等同于

class Cat extends Animal{

constructor(name) {

super(name);

//super作为函数调用时，代表父类的构造函数。

}

}

注意：如果我写了构造函数但是没有写super的话，或者super方法的参数不对等等，编译器都会报错。

2. 原型继承

在ES6之前，也有很多继承的方法，其中一个很常用的方法就是使用原型继承。其基本方法就是一个父类的实例赋值给子类的原型。这个继承方式是通过__proto__建立和子类之间的原型链，当子类的实例需要使用父类的属性和方法的时候，可以通过__proto__一级级向上找;

function Animal(name) {

this.name = name;

}

Animal.prototype.eat= function () {

console.log(this.name + '正在吃东西')

};

function Cat(furColor){

this.furColor = furColor ;

};

Cat.prototype = new Animal();

let tom = new Cat('black');

console.log(tom)

缺点: 1. 子类实例时，无法向父类构造函数传参。 2. 父类的私有属性被所有实例共享

三、call、apply、bind之间的关系

这又是一个面试经典问题, 也是ES5中众多坑中的一个，在 ES6 中可能会极大避免 this 产生的错误，但是为了一些老代码的维护，最好还是了解一下 this 的指向和 call、apply、bind 三者的区别.

bind,apply,call三者都可以用来改变this的指向, 下面分别对他们进行比较分析:

apply 和 call

· 二者都是Function对象的方法, 每个函数都能调用

· 二者的第一个参数都是你要指定的执行上下文

· apply 和 call 的区别是: call 方法接受的是若干个参数列表，而 apply 接收的是一个包含多个参数的数组。

var a ={

ame : "Cherry",

fn : function (a,b) {

console.log( a + b)

}

}

var b = a.fn;

b.apply(a,[1,2]) // 3

b.call(a, 4,5,6) // 15

我们常常使用的验证是否是数组(前提是toString()方法没有被重写过):

function isArray(obj){

return Object.prototype.toString.call(obj) === '[object Array]' ;

}

bind 与 apply、call区别

var a ={

ame : "Cherry",

fn : function (a,b) {

console.log( a + b)

}

}

var b = a.fn;

b.bind(a,1,2)(); // 3

我们发现bind()方法还需要调用一次; 是由于 bind()方法创建一个新的函数,我们必须手动去调用。

bind,apply,call的共同和不同点：

· 三者都可以用来改变this的指向

· 三者第一个参数都是this要指向的对象，也就是想指定的上下文，上下文就是指调用函数的那个对象。(点前的那个对象，没有就是全局window)

· 三者都可以传参，但是apply是数组，而call是有顺序的传入

· bind 是返回对应函数，便于稍后调用;apply 、call 则是立即执行

想了解更多关于前端的知识吗？可以来惠州北大青鸟新方舟校区了解一下。

标签：惠州前端培训学校惠州前端基础惠州前端培训北大青鸟IT计算机学校北大青鸟IT软件学校前端北大青鸟IT学校惠州北大青鸟北大青鸟