js 回顾私人笔记，内容若有错，烦请指正，谢谢！js变量常见引用类型类型转换字符串拼接==if语句和逻辑运算原型与原型链

私人笔记，内容若有错，烦请指正，谢谢！

js变量

值类型与引用类型 : 基本类型和对象

常见引用类型

	const obj = {a:1}
	const arr = [1,2,3]
	const n = null; // 特殊引用类型,指针指向空地址
	function fun(){} // 特殊引用类型,但不用作存储数据,故没有深浅拷贝

类型转换

字符串拼接
==
if语句和逻辑运算

const a = 100 + 10; // 110
const a = 100 + '10'; // '11010'
const a = true + '10'; // 'true110'
100 == '100' // true 双等号 会做 类型转换
0 == '' // true
false == '0' // true
null == undefinded // true

原型与原型链

class

class Student {
    constructor(name, age, male = "Male") {
        this.name = name; // this 指向最后一个调用它的对象
        this.age = age;
        this.male = male // male 如果不赋值 就是用默认值
    }
    sayHi() {
        console.log('myName :', this.name, 'myAge :', this.age, "Male :", this.male);
    }
}
let xialuo = new Student('xialuo', 100);
xialuo.sayHi(); // myName : xialuo myAge : 100 Male : 女

在这里插入图片描述

每个class都有 "显示原型" prototype 每个实例都有 "隐式原型" proto 每个实例的__proto__ 都指向 class的 prototype

基于原型的执行规则

当实例获取属性的时候先在自身的属性中查找如果找不到就去隐式原型(proto) 中寻找隐式原型__proto__ 与class 的显示原型prototype指向一样,最终去存放的堆中查找若都找不到则报错

原型链 在这里插入图片描述

使用 hasOwnPrototype 来判断该对象是否自身含有某个属性(从原型链继承来的则为false) instanceOf 的工作原理就是使用__proto__ 一层一层上溯,匹配成功即为true,失败即为 false

使用行为委托进行原型链关联

使用setPrototypeOf 来将一个对象关联到另一个对象的[[prototype]],从而实现继承:

class subTypeSuper(){
	construct(name,age){
    	this.name = name;
        this.age = age;
    }
    
    subTypeFun(){
    	console.log("my name is",this.name)
    }
}


class subType{
 	 construct(name,color,size){
      	this.name = name;
        this.color = color;
        this.size = size;
      }

      subTypeFun(){
        console.log("my name is", this.name)
   	  }
}

Object.setPrototypeOf(subType,subTypeSuper);

作用域与闭包

this不同场景的指向问题
手写bind函数(call，bind，apply相关)
闭包是什么,闭包在什么场合下使用、

一.this指向问题

在不使用bind，call，apply的情况下：谁调用则this指向谁（一般情况）。
在箭头函数中则取当前箭头函数上级的this；setTimeout与setInterval则指向window（可以使用闭包的写法来解决指向问题）；（特殊情况）
特例：在严格模式下：“use strict” window调用的时候则为undefinded，否则打印window

setTimeout与setInterVal的this指向问题

箭头函数的this指向问题

bind

可以接受n个参数，第一个参数是需要绑定到this的对象，后面的参数具体的被绑定函数的参数而定

function fn1(a,b,c,d){
	console.log(a,b,c,d)
}
let fn2 = fn1.bind({a:111},1,2,3,4);
fn2();

二.闭包

自由变量:如果一个函数内部有其他函数,那么这些内部函数可以访问外部函数中声明的变量(这些变量就称为自由变量)。

闭包就是一个函数捕获作用域内部的外部绑定，并以函数嵌套函数的形式,无限期延长外部自由变量的生命周期

闭包的三个特性:

 1.函数嵌套函数
 2.函数内部可以引用外部的参数和变量
 3.参数和变量不会被垃圾回收机制回收

闭包的好处:

1.一个变量可以长期驻扎在内存中
2.避免全局变量的污染
3.私有成员的存在
缺点是常驻内存,会增大内存的使用量,使用不当很容易造成内存泄露.

关于闭包的变量: 变量向上查找是在函数被定义的地方,而不是函数使用的地方 存在某些迷惑的地方，可能更准确的应该是需要调用变量的地方作为开始查找的起点！！！！

// demo1 函数作为返回值
	function createFn() {
	    let a = 100;
	    return function() {
	        console.log(a) // 在这里使用a, 因此从此处向上查找 -- 100
	    }
	}
	
	let a = 300;
	let fn = createFn(); // 这里定义的是fn,fn指向的是createFn的地址,而createFn 内部真正使用a的地方是在return中
	fn();
	
	
//demo2 函数作为参数被调用
	function createFn(fn) {
	    let a = 200
	    fn();
	}
	
	let a = 100;
	function fn() {
	    console.log(a); // 变量a在此处被调用,从此处开始向上查找 -- 100
	}
	createFn(fn);
	console.log('教程视频老师的说法是: 从函数定义的地方开始向外查找;但就像在demno1中,函数作为返回值,就容易混淆. 所以使用"在变量被调用的地方向上查找"会更易理解');

type of 能判断什么 ? js 类型 === 与 == 具体何时使用? (强制类型转换考点) window.onload 与DomContentLoaded的区别 (页面加载过程考点) js创建10个a标签,点击标签弹出第n个序号( 实际是js作用域问题,for循环打印的数全是最后一次的值) 手写节流防抖(throttle debounce) -- 性能优化体验考点 promise解决乐什么问题 -- (异步考点,事件队列)

HTML: h5新增和删除块级元素: display为block 和 table的 : div h table p ul ol 行内元素 display:inline-block,inline: a span img button CSS:

offsetWIdth : width + padding+border 没有 margin

BFC 是什么
动画
clearfix

clearfix:after{
	content:"";
	display:block;
	height:0;
	clear:both;
}

flex 画色子

主轴: main axis 交叉轴: cross axis
line-height的百分比继承

.container{
	font-size:20px;
	lineheight:200%;
}
.item{
	font-size:16px;
}
// 此处item的行高应该是  20px *200% = 40px   
// 是先计算完父级元素的高度再继承,而不是使用16px * 200%

网页视口尺寸 window.screen.height //屏幕高度 window.innerHeight // 网页视口高度 document.body.clientHeight // body高度
递归