javascript面试准备（一）

2019-10-19 本文已影响0人前端小飞象

interview

js 基础

原型原型链

作用域闭包

异步单线程

js Api dom 操作 ajax 事件绑定

版本管理模块化打包工具

题

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

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


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

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)

js 有哪些内置函数


Object

Array

Boolean

Number

String

Function

Date

RegExp

Error

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

如何理解 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

题

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


var arr = []

arr instanceof Array //true

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

写一个原型链继承的例子

用于理解


//动物

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('<p>hello hihi</p>')

  .on('click', function() {

    alert('clicked')

  })

  .html('<p>javascrip</p>')

描述 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)

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

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

作用域与闭包

执行上下文

范围：一段<script>或者一个函数
全局：变量定义、函数声明
函数：变量定义、函数声明、this、arguments

PS:注意“函数声明”和“函数表达式”的区别


console.log(a) //undefined

var a = 100

fn('zhangsan') //'zhangsan' 20

//函数声明

function fn(name) {

  age = 20

  console.log(name, age)

  var age

}

this

作为构造函数执行


function Foo(name) {

  this.name = name

}

var f = new Foo('zhangsan')

作为对象属性执行


//函数表达式

var obj = {

  name: 'A',

  printName: function() {

    consolo.log(this.name)

  }

}

obj.printName() //this===abj

作为普通函数执行


var fn1 = a.fn

fn1() //this===window

call apply bind


//this要在执行时确定值，定义时无法确认

var a = {

  name: 'A',

  fn: function() {

    console.log(this.name)

  }

}

a.fn() //this===a

a.fn.call({ name: 'B' }) //this==={name:'B'}

var fn1 = a.fn

fn1() //this===window

作用域

js 没有块级作用域


if (true) {

  var name = 'zhangsan'

}

console.log(name) //true

只有函数作用域和全局作用域


var a = 100

function fn() {

  var a = 200

  console.log('fn', a) //200

}

console.log('global', a) //100

fn()

作用域链


var a = 100

function fn() {

  var b = 200

  function fn2() {

    var c = 300

    //当前作用域没有定义的变量，既“自由变量”

    console.log(a) //100自由变量

    console.log(b) //200自由变量

    console.log(c)

  }

}

fn()

题

说一下对变量提升的理解（执行上下文）

变量定义
函数声明（注意与函数表达式的区别）

说明 this 几种不同的使用场景（this）
用 js 创建 10 个<a>标签点击的时候弹出来对应的序号（作用域）


var i

for (i = 0; i < 10; i++) {

  ;(function(i) {

    var a = document.createElement('a')

    a.innerHTML = i + '<br>'

    a.addEventListener('click', function(e) {

      e.preventDefault()

      alert(i)

    })

    document.body.appendChild(a)

  })(i)

}

如何理解作用域(作用域)

自由变量
作用域链自由变量的查找
闭包的两个场景

实际开发中闭包的应用（闭包）


function isFristLoad() {

  var _list = []

  return function(id) {

    if (_list.indexOf(id) >= 0) {

      return false

    } else {

      _list.push(id)

      return true

    }

  }

}

//使用

var firstLoad = isFirstLoad()

firstLoad(10) //true

firstLoad(10) //false

firstLoad(20) //true

异步和单线程

异步

在可能发生等待的情况
等待的过程中不能像 alert 一样阻塞程序执行

定时任务: setTimeout setInverval
网络请求: ajax 请求动态<img>加载
事件绑定


console.log(100)

setTimeout(function() {

  console.log(200)

}, 1000)

console.log(300)

//100 300 200异步 不阻塞

console.log(100)

alert(200)

console.log(300)

//同步100 200 300

题

异步和同步的区别是什么？分别举一个同步和异步的例子

同步会阻塞代码执行，而异步不会
alert 是同步。setTimeout 是异步

一个关于 setTimeout 的笔试题


console.log(1)

setTimeout(function() {

  console.log(2)

}, 0)

console.log(3)

setTimeout(function() {

  console.log(4)

}, 1000)

console.log(5) //1 3 5 2 4

前端使用异步的场景有哪些

定时任务: setTimeout setInverval
网络请求: ajax 请求动态<img>加载
事件绑定

日期


Date.now() //获取当前时间毫秒数

var dt = new Date()

dt.getTime() //获取毫秒数

dt.getFullYear() //年

dt.getMonth() //月

dt.getDate() //日

dt.getHours() //小时

dt.getMinutes() //分钟

dt.getSeconds() //秒

Math

获取随机数 Math.random()

数组 API

forEach 遍历所有元素


var arr = []

arr.forEach(function(item, index) {

  console.log(index, item)

})

every 判断所有元素是否都符合条件


var arr = []

var result = arr.every(function(item, index) {

  if (item < 4) {

    return true

  }

})

console.log(result)

some 判断是否有至少一个元素符合条件


var arr = []

var result = arr.some(function(item, index) {

  if (item < 2) {

    return true

  }

})

console.log(result)

sort 排序


var arr = [1, 6, 3, 5]

var arr2 = arr.sort(function(a, b) {

  return a - b

}) //[1, 3, 5, 6]

对象 API


var obj = {

  x: 100,

  y: 200,

  z: 300

}

var key

for (key in obj) {

  if (obj.hasOwnProperty(key)) {

    console.log(kay, obj[key])

  }

}

map 对元素重新组装，生成新数组
filter 过滤符合条件的元素
获取 2017-06-10 格式的日期


function formatDate(dt) {

  if (!dt) {

    dt = new Date()

  }

  var year = dt.getFullYear()

  var month = dt.getMonth() + 1

  var date = dt.getDate()

  if (month < 10) {

    month = '0' + month

  }

  if (date < 10) {

    date = '0' + date

  }

  return year + '-' + month + '-' + date

}

var dt = new Date()

var formaDate = formatDate(dt)

console.log(formatDate)

获取随机数，要求是长度一致的字符串格式


var random = Math.random()

var random = random + '0000000000'

var random = random.slice(0, 10)

console.log(random)

写一个能遍历对象和数组的通用 forEach 函数


function forEach(obj, fn) {

  var key

  if (obj instanceof Array) {

    //准确判断是不是数组

    obj.forEach(function(item, index) {

      fn(index, item)

    })

  } else {

    //不是数组就是对象

    for (key in obj) {

      fn(key, obj[key])

    }

  }

}

var arr = [1, 2, 3]

forEach(arr, function(index, item) {

  console.log(index, item)

})

var obj = { x: 100, y: 200 }

forEach(obj, function(key, value) {

  console.log(key, value)

})

javascript面试准备（一）

interview

js 基础

题

原型和原型链

构造函数

构造函数-扩展

原型规则和示例

原型链

题

作用域与闭包

执行上下文

this

作用域

题

异步和单线程

异步

题

日期

Math

数组 API

猜你喜欢

热点阅读