1 this指向
// this指向上一个调用者
var j = {
a: 10,
b: {
a: 12,
fn: function() {
console.log(this) // j.b
console.log(this.a) // 12
}
}
}
j.b.fn()
2 闭包
表现形式: 方法里返回一个方法;
作用: 延长局部变量的生命周期;实现数据私有化,避免变量被污染;
应用场景: 防抖、节流、vue2中data函数的设计;
插播一个阿里面试题
Object.prototype.sg = 'xz'
let obj = Object.create(null) // 没有__proto__。 只是存值,不需要原型链的方法,用这个效率更高
let obj2 = {}
for(let k in obj) {
console.log(k)
}
for(let k in obj2) {
console.log(k)
}
3 new 关键字
先创建一个空对象,然后将空对象的__proto__指向构造函数的prototype;然后再将构造函数的this指向空对象;最后返回这个加工好的对象(this)。
// 普通函数默认返回undefined, 构造函数返回新创建的对象
function Person() {
this.name = 'zs'
this.fn = function() {
console.log(`name is ${this.name}`)
}
}
Person.prototype.newFn = function() {
console.log('hh')
}
let p1 = new Person()
p1.fn()
p1.newFn()
// ******* 下面是new关键字做了什么?******
// 1 创建一个空对象
let p2 = null
let obj = new Object()
// 2 更改它的原型链
obj.__proto__ = Person.prototype;
// 3 更改this指向
let res = Person.call(obj)
// 4 判断返回值类型
if (typeof res === 'object') {
p2 = res
} else {
p2 = obj
}
p2.fn()
p2.newFn()
4 事件委托
事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。
通俗来讲,事件代理/事件委托是利用事件冒泡的特性,将本应该绑定在多个元素上的事件绑定在他们的祖先元素上,尤其在动态添加子元素的时候,可以非常方便的提高程序性能,减小内存空间。
<ul id="ul">
<li>0</li>
<li>1</li>
<li>2</li>
</ul>
<script>
const ul = document.getElementById('ul')
ul.onclick = function(event) {
const target = event.target
if (target.nodeName === 'LI') {
alert(target.innerText)
}
}
</script>