web大前端面试—JavaScript

1.关于闭包

什么是闭包?

闭包是有权限访问其它函数作用域内的变量的一个函数。

在js中,变量分为全局变量和局部变量,局部变量的作用域属于函数作用域,在函数执行完以后作用域就会被销毁,内存也会被回收,但是由于闭包是建立在函数内部的子函数,由于其可访问上级作用域的原因,即使上级函数执行完,作用域也不会被销毁,此时的子函数——也就是闭包,便拥有了访问上级作用域中变量的权限,即使上级函数执行完以后作用域内的值也不会被销毁。

闭包有三个特性:
  • 1.函数嵌套函数
  • 2.函数内部可以引用外部的参数和变量
  • 3.参数和变量不会被垃圾回收机制回收
闭包解决了什么?

本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。由于闭包可以缓存上级作用域,这样函数外部就可以访问到函数内部的变量。

闭包的应用场景

ajax请求成功的回调 一个事件绑定的回调方法 setTimeout的延时回调 一个函数内部返回另一个匿名函数

闭包的优缺点

优点: 让代码更加规范、简介
缺点: 使用闭包过多,内存消耗大,造成内存的泄露

2.原型和原型链

在这里插入图片描述

  • (1) 所有的引用类型都有一个_proto_(隐式原型)属性,属性值是一个普通的对象
  • (2) 所有的函数除了有_proto_属性,还都有一个prototype(显式原型)属性,属性值是一个普通的对象
  • (3) 所有引用类型的_proto_属性指向它构造函数的prototype

当一个对象调用自身不存在的属性/方法时,会先去它的_proto_上查找,也就是它的构造函数的prototype;如果没有找到,就会去该构造函数的prototype的_proto_指向的上一级函数的prototype中查找,再往上会指向对象的prototype,最后指向null。这样一层一层向上查找的关系会形成一个链式结构,称为原型链。

3.ES5继承和ES6继承

ES5: 组合式继承,先创建子类的实例对象,然后再将父类的方法通过call方法添加到this上,通过原型和构造函数的机制来实现

示例:

// 定义一个父类

functionParent() {
   
this.name = '小明'
this.age = 20
this.sex = '男'
}
// 在父类的原型上添加一个方法
Parent.prototype.play = function() {
   
    console.log('去打篮球')
}

// 定义一个子类
functionChild(name) {
   
this.name = name
// 第一步:继承父类的属性
Parent.call(this)
}
// 第二步:实现子类继承父类的方法
Child.prototype = newParent()
// 第三步:找回丢失的构造函数
Child.prototype.constructor = Child

ES6: 先创建父类的实例对象this(所以必须先调用父类的super()方法,然后在用子类的构造函数修改this),通过class关键字定义类,类之间通过extends关键字实现继承,子类必须在constructor方法中调用super方法。因为子类没有自己的this对象,而是继承了父类的this对象,然后对其加工,如果不调用super方法,子类得不到this对象。

示例:

// 定义一个父类
classParent{
   
   constructor(name, sex) {
   
     this.name = name
      this.sex = sex
   }
    play() {
   
        console.log(this.name + '打麻将超级垃圾')
    }
    speak() {
   
        console.log('性别是:'+ this.sex)
    }
}

// 父类的实例化
let father = newParent('小亮','男' )

father.play()  // 打篮球将超级垃圾
father.speak()  // 性别是男

// 创建一个子类去继承父类

classChildextendsParent
{
   
    constructor(name, sex) {
   
// 调用父类的 constructor
super(name, sex)
    }
}
// 子类的实例化
let son = newChild('小亮', '女')
son.play()
son.speak()

4.原生AJAX请求步骤

五步使用法:

  • (1) 创建XMLHTTPRequest对象
  • (2) 使用open方法设置和服务器的交互信息
  • (3) 设置发送的数据,开始和服务器端交互
  • (4) 注册事件
  • (5) 更新界面

Get请求:

// 第一步:创建异步对象
let xhr =  new XMLHttpRequest()

// 第二步:设置请求的url参数,参数1是请求的类型,参数2是请求的url,可以携带参数
xhr.open('get', '/baidu.com?username=1')

// 第三步:设置发送的数据,开始和服务端交互
xhr.send()

// 第四步:注册事件onreadystatechange,当状态改变时会调用
xhr.onreadystatechange = function() {
   
   if(xhr.readyState === 4&& xhr.status === 200) {
   
// 第五步:如果到达这一步,说明数据返回,请求的页面是存在的
        console.log(xhr.responseText)
    }
}

POST请求:

// 第一步:创建异步对象
let  xhr =  newXMLHttpRequest ()
// post请求一定要添加请求头,不然会报错
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
// 第二步:设置请求的url参数,参数1是请求的类型,参数2是请求的url,可以携带参数
xhr.open('post', '/baidu.com')
// 第三步:设置发送的数据,开始和服务端交互
xhr.send('username=1&password=123')
// 第四步:注册事件onreadystatechange,当状态改变时
  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值