前端知识点回顾——Javascript篇(一)

DOM特殊元素获取

document.documentElement //HTML标签

document.head //head标签

document.title //title标签

document.body //body标签

typeof 的那些坑

typeof null 返回Object，然而null是基本类型值而不是引用类型值，null == null 是成立的。

typeof NaN 返回number，NaN是一个自身不等于自身的数值类型。

typeof Symbol 返回function。

平稳退化和逐渐增强

平稳退化：可让访问者的浏览器在不支持JS的情况下仍能顺利地浏览网站。

逐渐增强：用一些额外的信息层去包裹原始数据，用css，js去包裹html结构。

按照逐渐增强的原则创建出来的网页几乎都符合平稳退化原则。

性能考虑

尽量减少访问DOM和标记。查询DOM中的某个元素都会搜索整个DOM树，因此最好将搜索结果保存在变量中后续操作使用。从源头上减少html元素节点以减小DOM树规模也是一点。
合并和放置脚本。合并多个脚本为一的原因可以减少加载页面时的请求数量，这是性能优化时首先需要考虑的。合理放置脚本（把script标签置于/body标记前，可先让其他文件并行加载，并在加载JS脚本时window对象的onload事件依然可以执行对文档进行各种操作）。
压缩脚本。删除空格注释，用短小的变量函数名替代，以达到精简脚本大小的目的。

var,let 和 const的区别

var 属于ES5的关键词，有变量提升作用，不存在块级作用域，因此容易出现被添加到在外部环境的问题。可以重复声明。在全局环境下声明一个变量会成为顶层对象的属性。

let和const属于ES6的关键词，无变量提升，存在TDZ，存在块级作用域，不可以重复声明。在全局环境下声明不会成为顶层对象的属性。

其中const声明常量，需要在声明的同时赋值，并且变量的值之后不能改变。

HTML元素的动态获取和静态获取

动态获取: 获取的变量是一组元素,当其中一个发生改变,第二次操作这组元素时,就会从新获取一次,不在计算改变的那一个。讲白了就是根据特点的特征来捕获，只要你是美女不管你是不是化了妆都会被选上。

getElementsByClassName/TagName/Name
静态获取：获取之后,就制定某一个对象或者节点,和节点的任何变化都没有关系。讲白了就是就算你改了名整了容，化成灰我都认得你。

getElementsById/querySelector/querySelectorAll

this的指向问题

默认绑定

在全局环境或是函数自执行情况下，this指向全局变量window
被作为某个对象的方法调用时候，this指向那个对象
被嵌套的函数独立调用时this指向window

var a = 0;
var obj = {
  a : 2,
  foo:function(){
        function test(){
              console.log(this.a);
        }
        test();
     }
}
obj.foo();   //window

闭包中里面函数独立调用,而不是方法调用,this默认绑定到window

隐式绑定

一般被直接对象所包含的函数调用时,也称之为方法调用,this隐式绑定到该直接对象

function fun(){
 console.log(this.a);
};
var obj1 = {
   a :  1,
   foo:fun,
   obj2:{
   a : 2,
   foo :fun
 }
}
obj1.foo();//1
obj1.obj2.foo();//2

箭头函数

箭头函数没有自己的 this，当在内部使用了 this时，它会指向最近一层作用域内的 this

严格模式

严格模式下this指向顶层对象window

还有一些奇葩操作。。。

object.getName和（object.getName）定义是相同的，所以返回'My Object'没有问题

(object.getName = object.getName)这里括号内进行了赋值操作，而这个值是函数本身。再赋值完毕后再调用了自身，所以当作函数自执行返回的是全局变量中的name属性。

var name = 'The window';
var object = {
    name : 'My Object',
    getName : function(){
        return this.name;
    }
};

object.getName();  //'My Object'
(object.getName)();  //'My Object'
(object.getName = object.getName)();  //'The window'

DOM节点css样式对象的读取

IE：node.currentStyle

非IE： getComputedStyle(node)

兼容: function getCSS(node){ return node.currentStyle || getComputedStyle(node);}

posted @ 2019-06-13 22:39 simple小前端阅读(178) 评论(0) 编辑收藏举报

刷新页面返回顶部

simple小前端