javascript面试准备（一）

interview

js 基础

原型 原型链

作用域 闭包

异步 单线程

js Api dom 操作 ajax 事件绑定

版本管理 模块化 打包工具

题

1. js 中使用 typeof 能得到哪些类型 （js 变量类型）

typeof undefined //undefined

typeof 'abc' //string

typeof 123 //number

typeof true //object

typeof {} //object

typeof [] //object

typeof null //object

typeof console.log //function

2. 何时用=== 何时使用==（强制类型转换）

//除了这两种其他都用===

if (obj.a == null) {

  //这里相当于obj.a===null ||obj.a===undefined 简写

  //这是jquery源码推荐写法

}

function(a,b){

  if(a==null){

  }

}

• 字符串拼接

var a = 100 + 10 //110

var a = 100 + '10' //'10010'

• ==运算符

100 == '100' //true

0 == '' //true 0和空字符串都转换成false

null == undefined //true

• if 语句

var a = true

if (a) {

}

var b = 100 //转换成bool true

if (b) {

}

if ('') {

  //false

}

if (0) {

  //false

}

if (null) {

  //false

}

if (NaN) {

  //false

}

if (false) {

  //false

}

if (undefined) {

  //false

}

• 逻辑运算 与或非

console.log(100 && 0) //0 100换成了true

console.log('' || 'abc') //'abc'

console.log(!window.abc) //true

//判断一个变量会被当做true 还是false

var a = 100

console.log(!!a)

3. js 有哪些内置函数

Object

Array

Boolean

Number

String

Function

Date

RegExp

Error

4. js 变量按照存储方式区分为哪些类型

// 值类型

var a = 10

var b = a

a = 11

console.log(b) //10

// 引用类型 :对象、数组、函数

var obj1 = { x: 100 }

var obj2 = obj1

obj1.x = 200

console.log(obj2.x) //200

5. 如何理解 JSON

//JSON只是一个js对象而已

//从一个对象解析出字符串

JSON.stringify({ a: 10, b: 20 }) //{"a":10,"b":20}

//parse用于从一个字符串中解析出json对象如

JSON.parse('{"a":10,"b":20}') //{a:10,b:20}

//注意：对象名必须用双引号 {}使用单引号包裹

原型和原型链

构造函数

function Foo(name, age) {

  this.name = name

  this.age = age

  this.class = 'class-1'

  //return this

}

var f = new Foo('zhangsan', 20)

//var f1=new Foo('lisi',22)

构造函数-扩展

• var a ={} 其实是 var a =new Object()的语法糖

• var a =[] 其实是 var a =new Array()的语法糖

• function Foo(){..}其实是 var Foo =new Function(...)

• 使用 instanceof 判断一个函数是否是一个变量的构造函数

原型规则和示例

• 所有的引用类型（数组、对象、函数），都具有对象特性，既可自由扩展属性（除了“null”外）

var obj = {}

obj.a = 20

var arr = []

arr.a = 10

function fn() {}

fn.a = 100

• 所有的引用类型（数组、对象、函数），都有一个__proto__(隐式原型)属性，属性值是一个普通对象

console.log(obj.__proto__)

console.log(arr.__proto__)

console.log(fn.__proto__)

• 所有的函数，都有一个 prototype(显示原型) 属性，属性值是一个普通对象

console.log(fn.prototype)

• 所有的引用类型（数组、对象、函数），都有一个__proto__属性值指向它的构造函数的“prototype”属性值

console.log(obj.__proto__ === Object.prototype)

• 当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的__proto__（既它的构造函数的 prototype）去寻找

//构造函数

function Foo(name, age) {

  this.name = name

}

Foo.prototype.alertName = function() {

  alert(this.name)

}

//创建实例

var f = new Foo('zhangsan')

f.printName = function() {

  console.log(this.name)

}

//测试

f.printName()

f.alertName()

for (var item in f) {

  if (f.hasOwnProperty(item)) {

    console.log(item)

  }

}

原型链

//构造函数

function Foo(name, age) {

  this.name = name

}

Foo.prototype.alertName = function() {

  alert(this.name)

}

//创建实例

var f = new Foo('zhangsan')

f.printName = function() {

  console.log(this.name)

}

//测试

f.printName()

f.alertName()

f.toString() //要去f.__proto__.__proto__中查找

原型链

)
[图片上传失败...(image-531d0f-1571457332167)]

• instanceof 用于判断引用类型属于哪个构造函数的方法

f instanceof Foo

题

1. 如何准确判断一个变量是数组类型

var arr = []

arr instanceof Array //true

typeof arr //object 无法判断是否时数组

2. 写一个原型链继承的例子

• 用于理解

//动物

function Animal() {

  this.eat = function() {

    console.log('animal eat')

  }

}

//狗

function Dog() {

  this.bark = function() {

    console.log('this bark')

  }

}

Dog.prototype = new Animal()

//哈士奇

var hashiqi = new Dog()

hashiqi.eat()

hashiqi.bark()

• 用于面试

function Elem(id) {

  this.elem = document.getElementById(id)

}

Elem.prototype.html = function(val) {

  var elem = this.elem

  if (val) {

    elem.innerHTML = val

    return this //链式操作

  } else {

    return elem.innerHTML

  }

}

Elem.prototype.on = function(type, fn) {

  var elem = this.elem

  elem.addEventListener(type, fn)

}

var div1 = new Elem('div1')

// console.log(div1.html())

div1

  .html('
hello hihi
')

  .on('click', function() {

    alert('clicked')

  })

  .html('
javascrip
')

3. 描述 new 一个对象的过程

• 创建一个新对象

• this 指向这个新对象

• 执行代码 即对 this 赋值

• 返回 this

function Foo(name, age) {

  this.name = name

  this.age = age

  this.class = 'class-1'

  //return this

}

var f = new Foo('zhangsan', 20)

4. zepto(或其他框架)源码中如何使用原型链

• 阅读源码是高效提高技能的方式 zepto 设计与源码分析 jquery

作用域与闭包

执行上下文

• 范围：一段