阅读 9

js前端面试题一句话说完经典问题

作用域

作用域是变量和函数生效的区域。分为全局变量和局部变量。函数外面不能访问函数里面的,函数里面的可以访问函数外面的。彼此独立的区间不能互相访问。 每个js的函数都是一个对象,对象有些属性我们可以访问,有些只能供js引擎存取,我们访问不了。[[scope]]就是其中之一。scope就是我们所说的作用域,其中存储了执行期上下文的集合。这个集合成链式结构,我们把这个连式结构称作作用域链。 当函数执行的前一刻,会创建一个称为执行期上下文的内部对象。一个执行期上下文定义一个函数执行环境,函数每次执行对应的执行上下文都是独一无二的。所以多次调用一个函数会导致创建多个执行期上下文,当函数执行完毕时候,执行期上下文就会被销毁。

js运行三部曲

  • 语法解析
  • 预编译
  • 解析执行

预编译

预编译分为函数预编译和全局预编译 预编译总共有四个步骤,第一个先创建一个AO对象(activation object),也叫作执行期上下文。第二个找到形参和变量声明,将变量和形参名作为AO的属性,值为undefined。第三部是实参和形参相统一,把实参值传到形参中。第四部将函数声明提升,值赋给函数体。 全局预编译是首先创建一个GO对象(blobal object),window就是GO。AO上面没有就看GO.

闭包

当内部函数被保存到外部时,将生成闭包,闭包会导致作用域链不释放,造成内存泄漏。

  • 实现公有变量(累加器)
  • 做缓存 (存储结构)
  • 实现封装,属性私有化
  • 模块开发防止污染全局变量

构造函数

构造函数必须用new 这个操作符,构造函数内部原理是使用new之后,里面会有三步隐式转换。

  • 在函数体最前面隐式的加上 var this = {} 空对象
  • 执行 this.xxx = xxx
  • 隐式的返回 return this

原型

原型是function对象的的一个属性,他定义了构造函数制造出来的对象的公有祖先。通过该构造函数产生的对象,可以继承原型的属性和方法。原型也是对象。 使用原型可以提取出来公有属性。对象属性的增删和原型上属性的增删改查。对象通过__proto__ 查看原型。对象可通过constructor查看构造函数。

原型链

函数的原型是另一个构造函数,另一个构造函数有原型,就形成原型链。原型链上的增删改查和原型基本一致,只有本人有的权限,资损失没有的。 谁调用的方法内部this就指向谁。绝大多数的对象最终都会继承自Object.prototype 除了 Object.create(null?原型)

继承

  • 原型链继承
  • 借用构造函数继承 call applay
  • 共享原型
  • 圣杯模式 另外加一个中间构造函数存储原型

this

  • 预编译 this 指向 window
  • 全局作用域 this 指向 window
  • call/applay 可改变函数运行时候this的指向
  • obj.func() func() 里的 this 指向obj 谁调用指向谁

深度克隆的步骤

  • 1、先把所有的值都遍历一遍(看是引用值和原始值) 用 for ( var prop in obj ),对象和数组都可以使用
  • 2、判断是原始值,还是引用值?用 typeof 判断是不是 object 1)如果是原始值就直接拷贝 2)如果是引用值,判断是数组还是对象
  • 3、判断是数组还是对象?(方法 instanceof【看 a 的原型链上有没有 b 的原型】、 toString、constructor,建议用 toString,另外两个有个小 bug——跨父子域不行) 1)如果是数组,就新建一个空数组; 2)如果是对象,就新建一个空对象。
  • 4、建立了数组以后,如果是挨个看原始对象里面是什么,都是原始值就可以直接考 过来了;或者,建立了对象以后,挨个判断对象里面的每一个值,看是原始值还是 引用值
  • 5、递归

redux-saga

创建store的时候,我根据官方文档的配,从react-saga中引入 createSagaMiddleware, 通过执行createSagaMiddleware函数创建sagaMiddleware. 然后创建sagas.js文件并引入。然后通过sagamiddleware.run()去运行这个文件。 在sagae.js里面,一定要导出一个generator函数。在这个generator函数中写一些逻辑。saga提供一个takeEvery()函数,这个函数两个参数,第一个是接收的type,第二个参数是一个函数。当我接收到从action匹配到的类型时候,,我会执行后面的方法。这个方法也是一个generator函数,他会去取数据,取数据可以是异步的,取完数据之后会在创建一个action,用saga提供的push方法发送这个action,给到store,这时候store,将这个action给到reducer,这时候reducer会去匹配派发过来的action,匹配成功之后,reducer就会将获取过来的数据替换掉state里的内容。这时候异步获取的数据就会渲染在组件里了。 saga thunk区别 saga是将异步操作分离在saga.js里面,thunk是在active里处理异步操作。saga提供非常多的api,thunk几乎没有api。在处理大型项目时候,saga会优于thunk。 redux 中间件 中间件是store和action的中间,对dispatch (action)进行了升级。

react-redux

react-redux 提供两个核心api,分别是供用者Provider,和connect。Provider组件上可以绑定stroe,被Provider包裹的组件会共享store里的数据。内部组件中使用 connect 让组件与stroe 做连接。connect是一个函数,有两个参数,第一个参数 mapStateToProps 是一个函数,里面有一个参数为state,就是store中的state,返回组建中需要的数据,在组建中通过 this.props.属性名使用。connect的第二个参数是mapDispatchToProps,mapDispatchToProps也是一个函数,有一个参数为dispatch, 返回一个对象,对象中可以写组建中需要使用的函数,dispatch(action),改变store中的数据等操作。

关注下面的标签,发现更多相似文章
评论