前端面试题系列之JavaScript篇

前端面试题系列之JavaScript篇

20
Oct 2018

JS的基本数据类型和引用数据类型

  • 基本数据类型:undefined、null、boolean、number、string、symbol
  • 引用数据类型:object、array、function

介绍JS有哪些内置对象?

  • 数据封装类对象:Object、Array、Boolean、Number、String
  • 其他对象:Function、Arguments、Math、Date、RegExp、Error
  • ES6新增对象:Symbol、Map、Set、Promises、Proxy、Reflect

如何编写高性能的JavaScript?

  • 遵循严格模式:”use strict”;
  • js脚本放在页面底部,加快渲染页面
  • 将js脚本将脚本成组打包,减少请求
  • 使用非阻塞方式下载js脚本
  • 尽量使用局部变量来保存全局变量
  • 尽量减少使用闭包
  • 使用 window 对象属性方法时,省略 window
  • 尽量减少对象成员嵌套
  • 缓存 DOM 节点的访问
  • 通过避免使用 eval() 和 Function() 构造器
  • 给 setTimeout() 和 setInterval() 传递函数而不是字符串作为参数
  • 尽量使用直接量创建对象和数组
  • 最小化重绘(repaint)和回流(reflow)

重绘和回流(重排)的区别和关系?

  • 重绘:当渲染树中的元素外观(如:颜色)发生改变,不影响布局时,产生重绘
  • 回流:当渲染树中的元素的布局(如:尺寸、位置、隐藏/状态状态)发生改变时,产生重绘回流
  • 注意:JS获取Layout属性值(如:offsetLeft、scrollTop、getComputedStyle等)也会引起回流。因为浏览器需要通过回流计算最新值
  • 回流必将引起重绘,而重绘不一定会引起回流

如何最小化重绘(repaint)和回流(reflow)?

  • 需要要对元素进行复杂的操作时,可以先隐藏(display:”none”),操作完成后再显示
  • 需要创建多个DOM节点时,使用DocumentFragment创建完后一次性的加入document
  • 缓存Layout属性值,如:var left = elem.offsetLeft; 这样,多次使用 left 只产生一次回流
  • 尽量避免用table布局(table元素一旦触发回流就会导致table里所有的其它元素回流)
  • 避免使用css表达式(expression),因为每次调用都会重新计算值(包括加载页面)
  • 尽量使用 css 属性简写,如:用 border 代替 border-width, border-style, border-color
  • 批量修改元素样式:elem.className 和 elem.style.cssText 代替 elem.style.xxx

JavaScript如何实现一个类,怎么实例化这个类?

  • 构造函数法(this + prototype) — 用 new 关键字 生成实例对象
    — 缺点:用到了 this 和 prototype,编写复杂,可读性差
  function Mobile(name, price){
     this.name = name;
     this.price = price;
   }
   Mobile.prototype.sell = function(){
      alert(this.name + ",售价 $" + this.price);
   }
   var iPhone7 = new Mobile("iPhone7", 1000);
   iPhone7.sell();
  • Object.create 法 — 用 Object.create() 生成实例对象
    — 缺点:不能实现私有属性和私有方法,实例对象之间也不能共享数据
var Person = {
     firstname: "Mark",
     lastname: "Yun",
     age: 25,
     introduce: function(){
         alert('I am ' + Person.firstname + ' ' + Person.lastname);
     }
 };

 var person = Object.create(Person);
 person.introduce();

 // Object.create 要求 IE9+,低版本浏览器可以自行部署:
 if (!Object.create) {
    Object.create = function (o) {
    function F() {}
    F.prototype = o;
    return new F();
  };
 }
  • 极简主义法(消除 this 和 prototype) — 调用 createNew() 得到实例对象
    — 优点:容易理解,结构清晰优雅,符合传统的”面向对象编程”的构造
 var Cat = {
   age: 3, // 共享数据 -- 定义在类对象内,createNew() 外
   createNew: function () {
     var cat = {};
     // var cat = Animal.createNew(); // 继承 Animal 类
     cat.name = "小咪";
     var sound = "喵喵喵"; // 私有属性--定义在 createNew() 内,输出对象外
     cat.makeSound = function () {
       alert(sound);  // 暴露私有属性
     };
     cat.changeAge = function(num){
       Cat.age = num; // 修改共享数据
     };
     return cat; // 输出对象
   }
 };

 var cat = Cat.createNew();
 cat.makeSound();
  • ES6 语法糖 class — 用 new 关键字 生成实例对象
     class Point {
       constructor(x, y) {
         this.x = x;
         this.y = y;
       }
       toString() {
         return '(' + this.x + ', ' + this.y + ')';
       }
     }

  var point = new Point(2, 3);

Javascript如何实现继承?

  • 构造函数绑定:使用 call 或 apply 方法,将父对象的构造函数绑定在子对象上
function Cat(name,color){
  Animal.apply(this, arguments);
  this.name = name;
  this.color = color;
}
  • 实例继承:将子对象的 prototype 指向父对象的一个实例
Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;
  • 拷贝继承:如果把父对象的所有属性和方法,拷贝进子对象
    function extend(Child, Parent) {
     var p = Parent.prototype;
     var c = Child.prototype;
     for (var i in p) {
        c[i] = p[i];
     }
     c.uber = p;
    }
  • 原型继承:将子对象的 prototype 指向父对象的 prototype
    function extend(Child, Parent) {
        var F = function(){};
       F.prototype = Parent.prototype;
       Child.prototype = new F();
       Child.prototype.constructor = Child;
       Child.uber = Parent.prototype;
    }
  • ES6 语法糖 extends:class ColorPoint extends Point {}
    class ColorPoint extends Point {
       constructor(x, y, color) {
          super(x, y); // 调用父类的constructor(x, y)
          this.color = color;
       }
       toString() {
          return this.color + ' ' + super.toString(); // 调用父类的toString()
       }
    }

Javascript作用链域?

  • 全局函数无法查看局部函数的内部细节,但局部函数可以查看其上层的函数细节,直至全局细节
  • 如果当前作用域没有找到属性或方法,会向上层作用域查找,直至全局函数,这种形式就是作用域链

谈谈this对象的理解

  • this 总是指向函数的直接调用者
  • 如果有 new 关键字,this 指向 new 出来的实例对象
  • 在事件中,this指向触发这个事件的对象
  • IE下 attachEvent 中的this总是指向全局对象Window

事件的三个阶段

捕获、目标、冒泡

事件的代理/委托

  • 事件委托是指将事件绑定目标元素的到父元素上,利用冒泡机制触发该事件
    — 优点:
    可以减少事件注册,节省大量内存占用
    可以将事件应用于动态添加的子元素上
    — 缺点:
    使用不当会造成事件在不应该触发时触发
    — 示例:
ulEl.addEventListener('click', function(e){
    var target = event.target || event.srcElement;
    if(!!target && target.nodeName.toUpperCase() === "LI"){
        console.log(target.innerHTML);
    }
}, false);

分析 [‘1’, ‘2’, ‘3’].map(parseInt) 答案是多少?

  • 答案:[1, NaN, NaN]
  • parseInt(string, radix) 第2个参数 radix 表示进制。省略 radix 或 radix = 0,则数字将以十进制解析
    map 每次为 parseInt 传3个参数(elem, index, array),其中 index 为数组索引
    因此,map 遍历 [“1”, “2”, “3”],相应 parseInt 接收参数如下
    所以,parseInt 参数 radix 不合法,导致返回值为 NaN
parseInt('1', 0);  // 1
parseInt('2', 1);  // NaN
parseInt('3', 2);  // NaN

new 操作符具体干了什么?

  • 创建实例对象,this 变量引用该对象,同时还继承了构造函数的原型
  • 属性和方法被加入到 this 引用的对象中
  • 新创建的对象由 this 所引用,并且最后隐式的返回 this

说说你对Promise的理解

标签:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

/鼻子 /黑头 /黄瓜 /魔鬼 /雪糕 /鄙视 /送花 /耳光 /神气 /石头 /石化 /睡觉 /爱心 /点赞 /死去 /无语 /捂眼 /拥抱 /打你 /感动 /感冒 /怒火 /微笑 /害羞 /奸笑 /唉呀 /哭泪 /吐血 /吐口水 /吐你 /口水 /勾引 /剪刀手 /出拳 /冰冻 /亲亲 /中指 /不想看 /不开心