每一个你不满意的现在,都有一个你不努力的曾经. 网站首页 > js
JavaScript知识点一
发布时间：2020-10-13 14:06:58
修改时间：2020-10-13 14:18:55
阅读：7492
评论：0
0
事件委托
利用冒泡的原理，把事件加到父级上，触发执行效果
event.target target.nodeName来判断是哪个标签
优点：
1、减少事件注册，节省内存。比如，
在table上代理所有td的click事件。
在ul上代理所有li的click事件。
2、简化了dom节点更新时，相应事件的更新。比如
不用在新添加的li上绑定click事件。
当删除某个li时，不用移解绑上面的click事件。
缺点：
1、事件委托基于冒泡，对于不冒泡的事件不支持。
2、层级过多，冒泡过程中，可能会被某层阻止掉。
3、理论上委托会导致浏览器频繁调用处理函数，虽然很可能不需要处理。所以建议就近委托，比如在table上代理td，而不是在document上代理td。
4、把所有事件都用代理就可能会出现事件误判。比如，在document中代理了所有button的click事件，另外的人在引用改js时，可能不知道，造成单击button触发了两个click事件。
//例子 <body> <div id="div1"></div> </body> window.onload = function(){ let body = document.querySelector('body'); let div1 = document.getElementById('div1'); body.addEventListener('click',function(){ console.log('打印body') }) div1.addEventListener('click',function(){ console.log('打印div1') }) }
文档碎片
document.createDocumentFragment() 一个容器，用于暂时存放创建的dom元素
原型模式的优缺点：
1、优点：可以让所有的对象实例共享它所包含的属性和方法
2、缺点：原型中是所有属性都是共享的，但是实例一般都是要有自己的单独属性的。所以一般很少单独使用原型模式。
prtotype、proto、constructor
◆每一个构造函数，都有一个原型[[prototype]]属性 指向构造函数的原型对象
◆每一实例化对象都有一个隐式原型_proto_ 指向构造函数的原型对象
◆每一个原型对象都有一个默认的constructor属性，指向对象的构造函数
闭包
指的是：能够访问另一个函数作用域的变量的函数
《JavaScript高级编程》书中建议：由于闭包会携带包含它的函数的作用域，因为会比其他函数占用更多内容，过度使用闭包，会导致内存占用过多。
//例如： function init() { var name = "Mozilla"; // name 是一个被 init 创建的局部变量 function displayName() { // displayName() 是内部函数，一个闭包 alert(name); // 使用了父函数中声明的变量 } displayName(); } init();
js链式作用域（冒泡同理）：
子对象会一级一级向上寻找所有父对象的变量，反之不行。
js变量两种作用域：
全局变量、局部变量（函数内）：js中函数内部可以读取全局变量，函数外部不能读取函数内部的局部变量。
闭包为什么可以实现在函数外读取到函数内的变量：
原因：init是displayName的父函数，displayName被赋给了一个全局变量，displayName始终存在内存中，displayName的存在依赖init因此init也始终存在内存中，不会在调用结束后，被垃圾回收机制回收。
class es6
class a{name = 'aaa'} function b(){this.name = 'aaa'} JSON.stringify(new ab()) === JSON.stringify(new abc()) === "{name = 'aaa'}"
一、运算符和关键字：
1、new ：
创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。
简单理解就是创建一个对象，把this指向的各个数据放进来。
语法：
new constructor[([arguments])]
//constructor 一个指定对象实例的类型的类或函数。 Object.prototype.constructor //arguments 一个用于被 constructor 调用的参数列表。 示例： //设置类A，这里可以是常规函数 function A(){} class A {} // 设置A的size属性 A.size = 11111 // 设置实例化后的size属性 new A().__proto__.size = 22222 //打印一下结果对比 A.size // 11111 new A().__proto__.size // 22222
注：如果你没有使用 new 运算符， 构造函数会像其他的常规函数一样被调用， 并不会创建一个对象。在这种情况下， this 的指向也是不一样的。
2、super:
super()===A.prototype.constructor.call(this)
super可以造访继承的父级原型对象、可访问父级的原型方法（针对static静态方法调用）
3、static对象：
static修饰的方法–可以直接调用或者new一个对象调用，
只能用new的方法调用，不可直接用 类.方法名 调用
//例如 class A{ b = 2; static c = 3; } new A().b //2 new A().c // undefined A.b //undefined A.c //3
回复列表
注册用户登录后才能发表评论，请 关键字词：span,style,font-size,1px,nbsp,br
上一篇：css常用属性
下一篇：JavaScript知识点二