网站建设 提供源码,支付宝微信wordpress,PHP网站建设计划书,0基础建设网站文章目录 1.对原型、原型链的理解2.原型修改、重写3.原型链指向4.对闭包的理解5. 对作用域、作用域链的理解6.对执行上下文的理解7.对this对象的理解8. call() 和 apply() 的区别#xff1f;9.异步编程的实现方式#xff1f;10.setTimeout、Promise、Async/Await 的区别11.对… 文章目录 1.对原型、原型链的理解2.原型修改、重写3.原型链指向4.对闭包的理解5. 对作用域、作用域链的理解6.对执行上下文的理解7.对this对象的理解8. call() 和 apply() 的区别9.异步编程的实现方式10.setTimeout、Promise、Async/Await 的区别11.对Promise的理解12.Promise的基本用法13.Promise解决了什么问题14.Promise.all和Promise.race的区别的使用场景15.对async/await 的理解16.await 到底在等啥17.async/await的优势18.async/await对比Promise的优势19.对象创建的方式有哪些20.对象继承的方式有哪些21.浏览器的垃圾回收机制22.哪些情况会导致内存泄漏 1.对原型、原型链的理解
原型是一个对象是函数的一个属性prototype任何函数都有通过该函数实例化出来的对象都可以继承得到原型上的所有属性和方法。 原型链访问实例对象的属性时首先在自己身上查找如果自身不存在那么就去它的原型对象prototype属性上查找这个原型对象又有自己的原型直到找到Object原型为null以此形成的类似链条的结构就称为原型链。
对象的proto保存着该对象的构造函数的prototype
2.原型修改、重写
原型的修改修改以后对象所有的实例都可以使用新增的方法
function Person(name) {this.name name
}
// 修改原型
Person.prototype.getName function() {}重写用一个新的对象来替换原来的原型。
Person.prototype {getName: function() {}
}注意重写原型时对象的构造函数可能会指向根构造函数Object
Person.prototype {getName: function() {}
}
var p new Person(hello)
p.constructor Person
console.log(p.__proto__ Person.prototype) // true
console.log(p.__proto__ p.constructor.prototype) // true3.原型链指向
function Person(name) {this.name name
}var p new Person(John)
var p1 new Person(Mike)console.log(p.__proto__) // Person.prototype
console.log(Person.prototype.__proto__) // Object.prototype
console.log(p.__proto__.__proto__) // Object.prototype
console.log(p.__proto__.constructor.prototype.__proto__) // Object.prototype
console.log(Person.prototype.constructor.prototype.__proto__) // Object.prototype
console.log(p1.__proto__.constructor) // Person
console.log(Person.prototype.constructor) // Person4.对闭包的理解
概念闭包的含义是一个函数有权访问另一个函数作用域的函数A函数中创建B函数函数B可以以访问到函数A中的变量函数B就是闭包。 用途在函数外部能够访问到函数内部的变量函数运行结束以后会保留对这个变量对象的引用不会回收对象。 不足占用更多内存会引起内存泄漏。 应用场景防抖节流–保存上一次运行的setTimeout不用闭包会重新创建定时器获取不到上一次定时器时间函数作为返回值vue的响应式原理函数嵌套
5. 对作用域、作用域链的理解
概念作用域–变量或者是函数能作用的范围。 作用域链当使用一个变量时首先在当前作用域查找如果没找到就去它的上层作用域去查找直到找到或者到了全局作用域这样形成的链式查找称为作用域链。 作用域分为函数作用域全局作用域以及块级作用域。 全局作用域常常定义在函数外部全局作用域变量可以在任意位置访问。 局部作用域函数作域定义在函数内部只能在函数中使用的变量作用范围是从函数开始到结尾。 块级作用域ES6 提供 let const 变量实现块级作用域。 块级作用域应用场景内部变量会覆盖外部变量用来计数的循环变量泄漏为全局变量。 作用作用域链的作用是保证对执行环境有权访问的所有变量的有序访问通过作用域链可以访问到外层环境的变量和函数。
6.对执行上下文的理解
执行上下文分为三种 全局执行上下文只有一个程序首次运行时创建它会在浏览器中创建一个全局对象window对象使this指向这个全局对象。 函数执行上下文函数被调用时创建每次调用都会为该函数创建一个新的执行上下文。 Eval 函数执行上下文。
执行上下文在执行一点JS代码之前需要先解析代码。解析的时候会先创建一个全局执行上下文环境先把代码中即将执行的变量、函数声明都拿出来变量先赋值为undefined函数先声明好可使用。这一步执行完了才开始正式的执行程序。执行上下文栈JavaScript引擎使用执行上下文栈来管理执行上下文。
7.对this对象的理解
概念this 是执行上下文中的一个属性它指向最后一次调用这个方法的对象。 指向 函数调用指向全局对象window 方法调用指向这个方法的对象 构造器调用如果一个函数用 new 调用时函数执行前会新创建一个对象this 指向这个新创建的对象。 apply 、 call 和 bind 调用这三个方法都可以显示的指定调用函数的 this 指向。其中 apply 方法接收两个参数一个是 this 绑定的对象一个是参数数组。call 方法接收的参数第一个是 this 绑定的对象后面的其余参数是传入函数执行的参数。bind 方法通过传入一个对象返回一个 this 绑定了传入对象的新函数。
8. call() 和 apply() 的区别
都是改变函数this指向的方法
apply 接受两个参数第一个参数指定了函数体内 this 对象的指向第二个参数为一个带下标的集合这个集合可以为数组也可以为类数组apply 方法把这个集合中的元素作为参数传递给被调用的函数。call 传入的参数数量不固定跟 apply 相同的是第一个参数也是代表函数体内的 this 指向从第二个参数开始往后每个参数被依次传入函数。
9.异步编程的实现方式
同步是指一个任务完成后才能执行另一个任务。 异步是把一个任务分成两段先执行第一段然后转而执行其他任务等做好了准备再回过头执行第二段。排在异步任务后面的代码不用等待异步任务结束会马上运行。 异步编程的方法JS 异步编程进化史callback - promise - generator - async await
回调函数回调函数是一个函数它被作为参数传递给另一个函数通常称为“主调函数”或“高层函数”。当主调函数完成某些操作或满足特定条件后它会调用这个回调函数。容易造成回调地狱问题Promise有时会造成多个 then 的链式调用生成器Generators/ yieldasync/awaitasync 函数是 generator 和 promise 实现的一个自动执行的语法糖它内部自带执行器当函数内部执行到一个 await 语句的时候如果语句返回一个 promise 对象那么函数将会等待 promise 对象的状态变为 resolve 后再继续向下执行。
10.setTimeout、Promise、Async/Await 的区别
setTimeout
console.log(script start) //1. 打印 script start
setTimeout(function(){console.log(settimeout) // 4. 打印 settimeout
}) // 2. 调用 setTimeout 函数并定义其完成后执行的回调函数
console.log(script end) //3. 打印 script start
// 输出顺序script start-script end-settimeoutPromise Promise本身是同步的立即执行函数当在executor中执行resolve或者reject的时候, 此时是异步操作 会先执行then/catch等当主栈完成后才会去调用resolve/reject中存放的方法执行
console.log(script start)
let promise1 new Promise(function (resolve) {console.log(promise1)resolve()console.log(promise1 end)
}).then(function () {console.log(promise2)
})
setTimeout(function(){console.log(settimeout)
})
console.log(script end)
// 输出顺序: script start-promise1-promise1 end-script end-promise2-settimeoutasync/awaitawait的含义为等待也就是 async 函数需要等待await后的函数执行完成并且有了返回结果Promise对象之后才能继续执行下面的代码。
async function async1(){console.log(async1 start);await async2();console.log(async1 end)
}
async function async2(){console.log(async2)
}
console.log(script start);
async1();
console.log(script end)
// 输出顺序script start-async1 start-async2-script end-async1 end11.对Promise的理解
Promise是异步编程的一种解决方案它是一个对象可以获取异步操作的消息他的出现大大改善了异步编程的困境避免了地狱回调。 Promise的实例有三个状态Pending进行中ResolvedRejected
Promise 是一个构造函数接收一个函数作为参数返回一个 Promise 实例。实例的状态只能由 pending 转变 resolved 或者rejected 状态并且状态一经改变就凝固了无法再被改变了。在构造 Promise 的时候构造函数内部的代码是立即执行的
12.Promise的基本用法
Promise构造函数接受一个函数作为参数该函数的两个参数分别是resolve和reject。
const promise new Promise(function(resolve, reject) {// ... some codeif (/* 异步操作成功 */){resolve(value);} else {reject(error);}
});一般情况下都会使用new Promise()来创建promise对象但是也可以使用promise.resolve和promise.reject这两个方法
Promise.resolve(11).then(function(value){console.log(value); // 打印出11
});方法
then()then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用第二个回调函数是Promise对象的状态变为rejected时调用。其中第二个参数可以省略。返回值根据回调函数的结果catch() 该方法相当于then方法的第二个参数指向reject的回调函数。all() 它接收一个数组数组的每一项都是一个promise对象。当数组中所有的promise的状态都达到resolved的时候all方法的状态就会变成resolved如果有一个状态变成了rejected那么all方法的状态就会变成rejected。返回的是一个数组保存着每一个promise对象resolve执行时的值。失败返回最先失败的值race 接受的参数是一个每项都是promise的数组但是与all不同的是当最先执行完的事件执行完之后就直接返回该promise对象的值。finally 不管promise最后的状态在执行完then或catch指定的回调函数以后都会执行finally方法指定的回调函数。
13.Promise解决了什么问题
使用ajax发一个A请求后成功后拿到数据需要把数据传给B请求那么需要如下编写代码
let fs require(fs)
fs.readFile(./a.txt,utf8,function(err,data){fs.readFile(data,utf8,function(err,data){fs.readFile(data,utf8,function(err,data){console.log(data)})})
})后一个请求需要依赖于前一个请求成功后将数据往下传递会导致多个ajax请求嵌套的情况代码不够直观。如果前后两个请求不需要传递参数的情况下那么后一个请求也需要前一个请求成功后再执行下一步操作这种情况下那么也需要如上编写代码导致代码不够直观。
14.Promise.all和Promise.race的区别的使用场景
使用场景 遇到发送多个请求并根据请求顺序获取和使用数据的场景就可以使用Promise.all来解决 当要做一件事超过多长时间就不做了可以用这个race方法来解决
15.对async/await 的理解
async/await其实是Generator 的语法糖它能实现的效果都能用then链来实现它是为优化then链而开发出来的。async 用于申明一个 function 是异步的而 await 用于等待一个异步方法执行完成。async 函数返回的是一个 Promise 对象。如果在函数中 return 一个直接量async 会把这个直接量通过Promise.resolve() 封装成 Promise 对象。
16.await 到底在等啥
await 等待的是一个表达式这个表达式的计算结果是 Promise 对象或者其它值。 await 表达式的运算结果取决于它等的是什么。
如果它等到的不是一个 Promise 对象那 await 表达式的运算结果就是它等到的东西。如果它等到的是一个 Promise 对象await 就忙起来了它会阻塞后面的代码等着 Promise 对象 resolve然后得到 resolve 的值作为 await 表达式的运算结果。
17.async/await的优势
单一的 Promise 链并不能发现 async/await 的优势但是如果需要处理由多个 Promise 组成的 then 链的时候优势就能体现出来了很有意思Promise 通过 then 链来解决多层回调的问题现在又用 async/await 来进一步优化它。
18.async/await对比Promise的优势
代码读起来更加同步Promise虽然摆脱了回调地狱但是then的链式调⽤也会带来额外的阅读负担错误处理友好async/await可以用成熟的try/catchPromise的错误捕获非常冗余方便调试
19.对象创建的方式有哪些
object构造函数创建new一个Object
//创建 Object 对象
var p new Object()//动态添加属性和方法
p.name Tom
p.age 18
p.setName function(name){this.name name
}对象字面量模式
var p {name Tomage 18setName: function(name){this.name name}
}自定义构造函数与object构造函数模式类似通过自定义一个构造函数再进行new操作创建对象
function Person(name, age){this.name namethis.age agethis.setName function(name){this.name name}
}var p1 new Person(Tom,18)构造函数原型的组合模式自定义构造函数属性在函函数中初始化方法添加到原型上。
function Person(name, age){this.name namethis.age age
}Person.prototype.setName function(name){this.name name
}var p1 new Person(Tom,18)20.对象继承的方式有哪些
一个对象从另一个对象中继承属性达到的效果是在一个对象中可以使用另一个对象中定义的属性。
原型链继承将子类型的原型对象设置为父类型的实例。存在共享引用类型属性的问题。如果在子类型中修改了引用类型的属性会影响到所有子类型的实例。
Dog.prototype new Animal(Tommy)构造函数继承在子类型的构造函数内部调用父类型的构造函数解决了不能向超类型传递参数的问题但无法实现函数方法的复用并且超类型原型定义的方法子类型也没有办法访问到。
function Employee(name, position) {Person.call(this, name) // 在子类型的构造函数内部调用父类型的构造函数传入name参数this.position position
}组合继承
// 子类型
function Dog(name, age) {Animal.call(this, name) // 借用构造函数继承属性this.age age
}// 将子类型的原型设置为父类型的实例
Dog.prototype new Animal()组合继承是将原型链继承和借用构造函数继承相结合的一种继承方式通过这种方式可以解决原型链继承和借用构造函数继承各自的缺点。 组合继承通过借用构造函数来继承属性通过将子类型的原型设置为父类型的实例来继承方法。
原型式继承原型式继承是一种基于已有对象创建新对象的继承方式适用于简单对象的继承。在 JavaScript 中可以使用 Object.create 方法来实现原型式继承。
// 基于原型对象创建新对象
var anotherPerson Object.create(person)寄生式组合继承了寄生式继承和组合继承的优点避免了调用两次父类构造函数以及在子类原型中创建不必要的属性。通过创建一个中间对象来继承父类的原型而不直接调用父类构造函数。
function inheritPrototype(subType, superType) {var prototype Object.create(superType.prototype) // 创建对象prototype.constructor subType // 增强对象subType.prototype prototype // 赋值对象
}// 子类型
function Dog(name, age) {Animal.call(this, name) // 继承属性this.age age
}// 使用寄生式继承来继承父类型的原型
inheritPrototype(Dog, Animal)21.浏览器的垃圾回收机制
JavaScript代码运行时需要分配内存空间来储存变量和值。当变量不在参与运行时就需要系统收回被占用的内存空间这就是垃圾回收。
JavaScript中存在两种变量局部变量和全局变量。全局变量的生命周期会持续要页面卸载而局部变量声明在函数中它的生命周期从函数执行开始直到函数执行结束。Javascript 具有自动垃圾回收机制会定期对那些不再使用的变量、对象所占用的内存进行释放当局部变量被外部函数使用时其中一种情况就是闭包在函数执行结束后函数外部的变量依然指向函数内部的局部变量此时局部变量依然在被使用所以不会回收。
垃圾回收方式
标记清除常用当变量进入执行环境时就标记这个变量“进入环境”被标记为“进入环境”的变量是不能被回收的因为他们正在被使用。当变量离开环境时就会被标记为“离开环境”被标记为“离开环境”的变量会被内存释放。引用计数法踪记录每个变量值被使用的次数当变量值引用次数为0时垃圾回收机制就会把它清理掉。当声明了一个变量并将一个引用类型赋值给该变量时则这个值的引用次数就是1。相反如果包含对这个值引用的变量又取得了另外一个值则这个值的引用次数就减1。
22.哪些情况会导致内存泄漏
意外的全局变量一直留在内存中。闭包 不合理的使用闭包从而导致某些变量一直被留在内存当中。被遗忘的计时器或回调函数设置了 setInterval 定时器而忘记取消它如果循环函数有对外部变量的引用的话那么这个变量会被一直留在内存中而无法被回收。
