JS知识库

JS知识库

这是我的个人知识库的一部分，欢迎访问

JS知识库 | 前端知识库@阳树阳树🚀

• 基础知识点
  • this相关问题
  • DOM核心
• 《你不知道的JavaScript》读书笔记
• JS知识点每日一题
  • JS原始数据类型有哪些？引用数据类型有哪些？
  • this的指向问题
  • 原始类型有哪几种？null 是对象嘛？
  • 浅拷贝与深拷贝

#基础知识点

#this相关问题

this的顺序规则：
1.函数是否在new中调用（new绑定）？如果是的话this绑定的是新创建的对象。

var bar = new foo();

2.函数是否通过call、apply（显式绑定）或者硬绑定调用？

var bar = foo.call(obj2);

3.函数是否在某个上下文对象中调用（隐式绑定）？如果是的话，this绑定的是那个上下文对象。

var bar = obj1.foo();

4.如果都不是的话，使用默认绑定。如果在严格模式下，就绑定到undefined，否则绑定到全局对象。

 var bar = foo();

#DOM核心

#关于DOM操作，主要有创建，增，删，改，查，属性操作，事件操作。

#(1)创建

1.document.write
2.innerHTML
3.createElement

state：
1.document.write 是直接将内容写入页面的内容流，但是文档流执行完毕会导致页面全部重绘，只保留html标签和写入内容。
2.innerHTML 是将内容写入某个DOM节点，不会导致页面全部重绘。
3.innerHTML 创建多个元素效率更高(不要拼接字符串，采取数组形式拼接)，结构稍微复杂。

innerHTML在不使用拼接字符串的情况下，比创造元素拼接元素要快一些。 4.虽然createElement()创建多个元素慢一些，但是结构更清晰。

#(2)增

1.appendChild

// 此方法在node节点「父亲节点」里，顺序增加一个节点
node.appendChild(child)

2.insertBefore

// 此方法在node节点「父亲节点」里，在开头增加一个节点
node.insertBefore()

#(3)删

1.removeChild

//此方法从DOM中删除一个子节点，返回删除的节点。
node.removeChild()

#(4)改

主要修改dom的元素属性，dom的内容，属性，表单的值等

修改内容	index
元素属性	src,href,title
普通元素内容	innerHTML,innerText
元素样式	style，className
表单内容	value，type，disabled

#(5)查

1.DOM提供的API方法：getElementById,getElementByTagName(古老用法)
2.H5提供的新方法：querySelector,querySelectorAll
3.利用节点操作获取元素：父(parentNode),子(children),兄(previousElementSibling,nextElementSibling)

#(6)属性操作

1.setAttribute：设置dom的属性值 2.getAttribute：得到dom的属性值 3.removeAttribute移除属性

#(7)事件操作

鼠标事件	触发条件
onclick	鼠标点击触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标谈起触发
onmousedown	鼠标按下触发

#《你不知道的JavaScript》读书笔记

let,var and const

1.let
(1)let 如果是在作用块中定义的变量，不会提升「如果先用后定义会报错,undefined」，并且作用域也不变。
(2)let不可以重复声明，否则会报错；var则可以。

建议：写代码的时候加一对花括号来“显式”标明这个作用块

2.var 如果是在作用块中定义的变量，会提升到该作用块的开头部分「但只会提前声明而不会提前赋值」，同时作用域上升一级。

3.const 定义一个变量，声明变量时必须初始化变量,同时const也不能被重复声明
如果这个量被改变会报错
不过如果const声明的是一个对象，那改变对象里面的值并不算修改了这个对象，所以可以，也并不会报错。

IFFE:立即执行函数

IFFE(Immediately Invoked Function Expression):立即执行函数

在书上看到的内容巧合的出现在了JavaScript的专业课程上，有种不期而遇的幸福感
立即执行函数有两种执行方式：
1.(fun{….}());
2.(fun{….})();
好处：不会污染全局作用域

LHS and RHS

1.LHS:赋值操作的目标是谁「左侧」
2.RHS(retrieve his source value):谁是赋值操作的源头「非左侧」

提升

var a = 2;

这段代码可以拆分成

var a

与

a = 2

两个语句。
第一个语句自动提升到该作用域的最顶部，
而第二个语句保留在原位置：“使用var时，没有一个一个变量是未声明的”

闭包

理解：

闭包使得函数可以从外部访问定义时的词法作用域。

识别闭包：

当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行。

典型例子：

function foo() {
	var a = 2;

	function bar() {
		console.log( a );
	}
	return bar;
}
var baz = foo();
baz();//console.log(a) ==> 2

块作用域与闭包结合
需求：从1打印到5

代码1:

for(var i = 1 ; i <= 5; i++){
     (function(){
       	 setTimeout(function timer(){
                console.log( i );
            },i*1000);
            })();
    	}
		// 6 6 6 6 6

原因：
一直输出6是因为i是共用的，执行完了五次循环之后，创建了五个事件之后，i=6

代码2:

for(var i = 1 ; i <= 5; i++){
        (function(j){
           // var j = i;
            setTimeout(function timer(){                    		console.log( j );
            },j*1000);
        })( i );
    }
	//1 2 3 4 5

原因：
每次创建这个函数的时候都有一个传入值，不会复用i

代码3:

  for(let i = 1 ; i <= 5; i++){
        (function(){
            setTimeout(function timer(){
               console.log( i );
            },i*1000);
        })();
    }
// 1 2 3 4 5 

原因：
每次创建这个函数的时候let都创建了一个块作用域，i是小的作用域里的，已经覆盖掉了原本的i，所以没问题

#JS知识点每日一题

#JS原始数据类型有哪些？引用数据类型有哪些？

#七大原始值

1.boolean
2.symbol
3.null
4.undefined
5.string
6.number
7.bigint

#引用数据类型

对象：Object(包含普通对象-Object，数组对象-Array，正则对象-RegExp，日期对象-Date，数学函数-Math，函数对象-Function)

#this的指向问题

#this隐式绑定的情况

1.全局上下文
2.直接调用函数
3.对象.方法的形式调用
4.DOM事件绑定(特殊)
5.new构造函数绑定
6.箭头函数

#全局上下文

全局上下文默认this指向window, 严格模式下指向undefined。

#直接调用函数

直接赋值然后调用

See More

let obj = {
  zzk: function() {
    console.log(this);
  }
}
let func = obj.zzk;
func();

直接调用this相当于全局上下文

#对象.方法的形式调用

obj.zzk();

这就是对象.方法的的情况，this指向对象

#DOM事件绑定

onclick和addEventerListener中 this 默认指向绑定事件的元素。

IE比较奇异，使用attachEvent，里面的this默认指向window。

#new+构造函数

此时构造函数中的this指向实例对象。

#箭头函数？

箭头函数没有this, 因此也不能绑定。里面的this会指向当前最近的非箭头函数的this，找不到就是window(严格模式是undefined)。比如:

See More

let obj = {
  a: function() {
    let do = () => {
      console.log(this);
    }
    do();
  }
}
obj.a(); 
// 找到最近的非箭头函数a，a现在绑定着obj, 因此箭头函数中的this是obj

优先级: new > call、apply、bind > 对象.方法 > 直接调用。

#分析实例

eg1:

See More

function a(){
	function b(){
		console.log(this);
		function c() {
			"use strict";
			console.log(this);
		}
		c();
	}
	b();
}
a();
//输出为 Winodw和undefined;
//执行顺序是首先调用a()方法，然后嵌套着调用b()方法，此时console.log(this)为全局--> Window
//调用b()方法的时候又会调用c()方法，在function c()中使用了严格模式，在严格模式中默认this为undefined
//其实就是第一个是全局，第二个是严格模式的默认值

eg2:

See More

var name = '小白';

function special() {
	console.log('姓名：'+this.name);
}

var girl = {
	name:'zzk',
	detail: function () {
		console.log('姓名：'+this.name);
	},
	woman: {
		name:'cxz',
		detail: function(){
			console.log('姓名：'+this.name);
		},
	},
	special:special,
}

girl.detail();
//ans:zzk
//这是对象.方法的情况
//this指向这个对象
girl.woman.detail();
//ans:cxz
//看后面两个，还是对象.方法的情况，this指向这个对象
girl.special();
//ans:zzk
//这是对象.方法的情况
//this指向这个对象

#原始类型有哪几种？null 是对象嘛？

答：
原始数据类型有6种，分别是：“Symbol,number,String,null,undefined,boolean.”
用typeof来查看null的话，显示的确实是Object，但其实这是历史遗留的Bug。
在 JS 的最初版本中使用的是 32 位系统，为了性能考虑使用低位存储变量的类型信息，
000 开头代表是对象，然而 null 表示为全零，所以将它错误的判断为 object 

#浅拷贝与深拷贝

​​​​​​​

浅拷贝与深拷贝

offset

client

scroll

​​​​​​​