有关js面试

1. Js中使用typeof能得到哪些类型？

考点：Js变量类型

1. 何时使用？

考点：强制类型转换

1. window.onload和DOMContentLoaded的区别

考点：浏览器渲染过程

1. 用JS创建10个<a>标签，点击的时候弹出来对应的序号。

考点：作用域

1. 简述如何实现一个模块加载器，实现类似require.js的基本功能？

考点：JS模块化

1. 实现数组的随机排序

考点：JS基础算法

二． 变量类型和计算

1. 值类型（基本数据类型）和引用类型

值类型又分为：数值型、字符型、布尔型----Byte, char,int,float,short,double,long,belean.

引用类型又分为：类、接口、数组。

值类型是把每一个值都存在变量的内存地址。

引用类型(包含的是一个指向对象的指针)通过指针指向对象的位置。引用类型：对象、数组、函数。

引用类型的特点：它可以无限制控制属性。

1. 变量计算--（值类型计算）强制类型转换

- 字符串拼接

- ==运算符(一定要谨慎使用！)

100==’100’  //true

0==’’       //true

Null==undefined    //true

- if语句

- 逻辑运算

Console.log(10 &&0)  //0

Console.log(‘’ || ‘abc’)  //’abc’

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

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

var a=100;

Console.log(!!a)  添加两个叹号

1. 引用类型计算----数组的遍历，排序。其实就是一种功能性的API计算，并不是变量本身的计算；

三. 解答

1.Js中使用typeof能得到哪些类型？

考点：Js变量类型

typeof  undefined   //undefined

typeof  ‘abc’   //string

typeof  123  //number

typeof  true   //boolean

typeof  { }   //object

typeof  [ ]   //object

typeof  null   //object

typeof  conselo.log  //function

实际操作

2.何时使用？

考点：强制类型转换

If(obj.a==null){

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

}jq推荐的简写方式

1. 问题：JS中有哪些内置函数----数据封装类对象

Object

Array

Boolean

Number

String

Function

Date

Error

RegExp

1. JS按存储方式区分变量类型--------值类型、引用类型
2. 如何理解json---------json只不过是一个js对象,也是一种数据格式

1. 原型和原型链

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

1. 写一个原型链继承的例子
2. 描述new一个对象的过程
3. Zepto（或者其他框架）源码中如何使用原型链

知识点：

1. 构造函数

var a={ } 其实是var a=new Object()的语法糖--对象函数

var a=[ ] 其实是var a=new Array()的语法糖---数组函数

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

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

判断一个变量是否为“数组”：变量instanceof Array

5条原型规则

-1 所有的引用类型（数组，对象，函数），都具有对象特性，即自由扩展属性（除了“null”以外）

var obj={};obj.a=100;----------对象

var arr=[];arr.a=100;---------数组

function fn() {}----------函数

fn.a=100;

- 2所有的引用类型（数组，对象，函数），都有一个_proto_（隐式原型）属性，属性值是一个普通的对象

console.log(obj._proto_);----------隐式原型

console.log(arr._proto_);

console.log(fn._proto_);

- 3 所有的函数，都有一个prototype（显式原型）属性，属性值也是一个普通的对象。

- 4 所有的引用类型（数组，对象，函数），_proto_属性值指向它的构造函数的”prototype”属性值

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

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

Instanceof------用于判断引用类型属于哪个构造函数的方法。

f instanceof Foo的判断逻辑是：

- f 的_proto_一层一层往上，能否对应到Foo.prototype

- 再试着判断f instanceof Object

 

 

解题

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

typeof是无法判断是否是数组的。

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

//先用对象字面量去构造一个有用的对象

(function(){

    var myMammal = {

        name : 'Herb the Mammal',

        get_name : function(){

            return this.name;

        },

        says : function(){

            return this.saying || '';

        }

    }

    //一旦有了一个想要的对象，我们就可以利用Object.create方法构造出更多的实例来

    var myCat = Object.create(myMammal);

    myCat.name = 'yzs';

    myCat.saying = 'meow';

    myCat.purr = function(n){

        var i, s='';

        for(i = 0;i < n; i += 1){

            if (s){

                s += '-';

            }

            s += 'r';

        }

        return s;

    };

    myCat.get_name = function(){

        return this.says + '' + this.name + '' + this.says;

    };

    console.log('myCat=' +myCat.name);

    console.log('myMammal=' +myMammal.name);

})();

//myCat的原型链就继承了myMammal所有属性。

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

过程：

1. 创建一个新对象
2. this指向这个对象
3. 执行代码，即对this赋值
4. 返回this

1，简单版本：

   function Foo(name,age){

this.name=name;

this.age=age;

this.class='class-1';

// return this;默认有这一行

}

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

//创建多个对象

 

1. 分别通过构造函数与class类实现了一个简单的创建实例的过程。

// ES5构造函数

let Parent = function (name, age) {

    this.name = name;

    this.age = age;

};

Parent.prototype.sayName = function () {

    console.log(this.name);

};

const child = new Parent('听风是风', 26);

child.sayName() //'听风是风'

 

//ES6 class类class Parent {

    constructor(name, age) {

        this.name = name;

        this.age = age;

    }

    sayName() {

        console.log(this.name);

    }

};

const child = new Parent('echo', 26);

child.sayName() //echo

 

------------------------------------------------------------------

// ES5构造函数

let Parent = function (name, age) {

    let that = this;

    that.name = name;

    that.age = age;

    return that;

};

const child = new Parent('听风是风', '26');

为什么要这么写呢？我在前面说this的创建与返回是隐性的，但在工作中为了让构造过程更易可见与更易维护，所以才有了上述使用that代替this，同时手动返回that的做法；这也验证了隐性的这两步确实是存在的。它只描述了构造器属性是如何塞给实例，没说原型上的属性是如何给实例继承的。

 

 

 

 

 

 

 

4.Zepto（或者其他框架）源码中如何使用原型链

Zepto设计和源码分析

1. 写一个封装DOM查询的例子

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

eiem.addEventListener(type,fn)

}

var div1=new Elem('artical_real')

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

div1.html('<p>hello imooc</p>')

div1.on('click',function(){

alert('cliked')

})

1. 作用域和变量提升

题目：

说一下对变量提升的理解

说明this几种不同的使用场景

创建10个<a>标签，点击的时候弹出来对应的序号

如何理解作用域

实际开发中闭包的应用

知识点：执行上下文、this、作用域、作用域链、闭包

执行上下文：

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

console.log(a)//undifined   拿a的声明，通过undefined来占位

var a=10

fn('dys')

function fn(name){

age=21

console.log(name,age)//’dys’ 21

var age

this----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()  //this === window

fn1()

说明this几种不同的使用场景：

1，作为构造函数执行

2，作为对象属性执行

3，作为普通函数执行

4，call  apply   bind

代码：

1.作为构造函数执行

function Foo(){

this.name=name

}

var f=new Foo(‘dys’)

2，作为对象属性执行

var obj={

name:’A’,

printName:function(){

console.log(this.name)

}}

Obj.printName()

3，作为普通函数执行

function fn(){

console.log(this)

}

fn()

4，call  apply   bind

function fn1(name,age){//call(最常用)

alert(name)

console.log(this)

}

fn1.call({x:100},'dys',21)

function fn1(name,age){//apply

alert(name)

console.log(this)

}

fn1.apply({x:100},['dys',21])

var fn2=function(name,age){//bind

alert(name)

console.log(this)

}.bind({y:200})

fn2('ewy',21)

     作用域

1. 没有块级元素
2. 函数和全局作用域

//无块级作用域

if(true){

var name='dys'

}

console.log(name)

//函数和全局作用域

var a=100

function fn(){

var a=200

console.log('fn',a)

}

console.log('global',a)

fn()

}

创建10个<a>标签，点击的时候弹出来对应的序号

如何理解作用域：

1. 自由变量
2. 作用域链，即自由变量的查找
3. 闭包的两个场景---闭包实际应用中主要用于封装变量，收敛权限

1. 同步异步

题目：1. 同步和异步的区别？分别举例子

区别：1.同步会阻塞代码执行，而异步不会

      2.alert是同步，setTimeout是异步

 function.log(100)

setTimeput(function(){

console.log(200)

},10000)

console.log(300)

--- 何时需要异步？

1. 在可能发生等待的情况
2. 等待过程中不能像alert一样阻塞程序运行
3. 因此，所有的“等待的情况”都需要异步

2，一个关于setTimeout的笔试题

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

------1.定时任务：setTimeout,setTnverval

1. 网络请求：ajax请求，动态<img>加载
2. 事件绑定

一． 其他知识

1. 获取2019-08-01格式的日期

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

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

日期

Math

数组API

  forEach 遍历所有元素

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

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

  Sort 排序

  map  对元素重新组装，生成新数组

 filter  过滤符合条件的元素

对象API

二．  性能优化

1. 多使用内存，缓存或者其他方法
2. 减少cpu计算，减少网络，减少i/o输出

  从哪入手？

  -------加载页面和静态资源优化

     -静态资源的压缩合并（几个js文件合并成一个js文件）

     -静态资源缓存（通过连接名称控制缓存、只有内容改变的时候，链接名称才会改变）<script src=”abc_1.js”></script>

     -使用CDN让资源加载更快(通过引用网络下载的cdn)

（因为CDN是一个不同区域的网络优化，比如：我在北京，我想访问地址的时候，同样一个地址，CDN会给我转到最近的机房）

     -使用SSR(服务端渲染)后端渲染，数据直接输出到HTML中

--------------页面渲染（优化）

   -css放前面，js放后面

   -懒加载

   -减少DOM查询，对DOM查询做缓存

   -减少dom操作，多个操作尽量合并在一起

   -事件节流

   -尽早执行操作

三． 安全性

前端的安全问题有哪些？

   XSS跨站请求攻击

------再新浪博客写一篇文章，同时偷偷插入一段<script>

-------攻击代码中，获取cookie，发送自己的服务器

--------发布博客，有人查看博客内容

--------会把查看者的cookie发送到攻击者的服务器

预防：

前端替换关键字，例如：替换 < 为 < ,>为 >

后端替换

   

XSRF跨站请求伪造

-----你已登录一个购物网站，正在浏览器商品