sheeplu/JS笔记

观看地址https://www.bilibili.com/video/BV14s411E7qf?p=1

js高级

基础总结深入

数据类型

分类
- 基本（值）类型
  - string ：任意字符串
  - number：任意的数字
  - boolean：true/false
  - undefined：undefined
  - null:null
- 对象（引用）类型
  - object:任意对象
  - Function：一种特别的对象（可以执行）
  - Array(数组)：一种特别的对象（数值下标属性，内部数据是有序的）
判断
- type of 可以判断undefined，数值,布尔
- instanceof（判断对象的具体类型判断函数或数组）
- === 全等不会做数据转换 == 会做数据转换
  - 可以判断undefined和null

基本对象

``` javascript
<script type ="text/javascript"
	//1.基本
	//typeof返回数据类型的字符串表达
	var a 
    console.log(a,typeof a==='undefined',a===undefined )// undefined 'undefined'  true true
	//打印输出怎么知道这个a是undefined值 直接用typeof a=== 不能用instancesof
    console.log(undefined === 'undefine')//false
	
	a=3
	console.log(typeof a==='number' a===3)//true 三个等不能判断是否是数值类型，因为也可以等于4
	a='atguigu'
	console.log(typeof a==='string')//true(string小写)
	a=true
	console.log(typeof a==='boolean')//true
	a=null
	console.log(typeof a,a===null)//object 不能判断 应该用全等
	
```

对象类型

``` javascript
//2.对象
var b1={
  b2:[1,'abc',console.log]//最后是什么数据类型
  b3:function(){
    console.log('b3')
    return function(){
      return 'xfzhang'
    }
  }
}
console.log(b1 instanceof Object,b1 instanceof Array)//布尔 判断B1是不是b1的实例 返回true
console.log(b1.b2 instanceof Array, b1.b2 instanceof Object)//true true
console.log(b1.b2 instanceof Function,b1.b3 instanceof Object )//true
				  
console.log(typeof b1.b3)//'function'
console.log(typrof b1.b2[2]==='function')
b1.b2[2](4)//左边是函数，特点是执行调用 加括号执行调用
console.log(b1.b3()())
				  
				  
				  
				  
				  
				  
				  
//instanceof 实例 Ainstanceof B  A是不是B的实例 A是不是B的构造函数
new Object()//构造函数
	
```

实例-类型对象-实例对象

``` javascript
function Person (name,age){//构造函数 类型 是对象 函数是一种特别的对象
				   
  this.name =name
  this.age=age
}
var p =new Persion('tom',12) // 根据类型创建的实例对象  new的时候才能确定构造函数大写了
//Person('jack',12)
   
```

问题
- 1、undefined和null的区别
  - undefined 代表定义未赋值
- 2、什么时候给变量赋值为null
  - 表明将要把变量赋值为对象
  - 初始赋值表明变量赋值为对象
  - 结束前，赋值
  - var b =null b=['atguigu',12] b=null//释放数组切断，让b指向的对象成为垃圾对象（被垃圾回收器回收）
- 3、严格区别变量类型与数据类型
  - 数据的类型
    - 基本类型
    - 对象类型
  - 变量的类型(变量内存值的类型)
    - 基本类型：保存的就是基本类型的数据
    - 引用类型：保存的是一个地址值
    - var c =function(){ } typeof c

数据变量与内存
- 1、什么是数据
  - 存储在内存中代表特定信息的’东东‘，本质上是0101010..
  - 数据的特点:可传递，可运算
  - 一切皆数据
  - 内存中所有操作的目标：数据
    - 算术运算
    - 逻辑运算
    - 赋值（数据拷贝）
    - 运行函数
- 2、什么是内存
  - 内存条
  - 内存条通电后产生的可存储数据的空间（临时的）
  - 内存产生和死亡（电路板）
  - 一块小内存的2个数据
    - 内部存储的数据
    - 地址值
  - 内存的分类
    - 栈：全局变量/局部变量
    - 堆：对象（函数是对象）（函数名在栈里面，是变量名）
    - 代码先编译再解析执行
- 3、什么是变量
  - 可变化的量，由变量名和变量值组成
  - 每个变量都对应的一块小内存，变量名用来查找对应的内存，变量值
  - 变量值就是内存中保存的数据
- 4、内存、数据、变量三者之间的关系
  - 内存用来存储数据的空间
  - var obj ={ name :'Tom'}
    - 右边赋值到左边
    - 对象地址0x123赋值=将变量保存到内存里
  - var a =obj
    - a=0x123
    - 变量赋值将一个变量保存的内容 ^^拷贝^^ 一份
  - console.log(obj.name)
    - 什么样的变量才能点
    - 内存存的是地址才能.name
    - name里面存的Tom，冒号的左边是内存的标识，右边是内部存储的数据
- ```
var age = 18
console.log(age)
var obj ={name:'Tom'}
console.log(obj.name)
function fn(){
  var obj ={name:'Tom'}
}
```
- 问题：var a=xxx，a内存中到底保存的是什么
  - xxx是基本数据，保存的是数据
  - xxx是对象，保存的是对象地址值
  - xxx是一个变量
  - var a =3 a = function (){ } var b='abc' a=b b={} a=b
- 关于引用变量赋值问题
  - 两个引用变量指向同一个对象，通过一个变量修改对象内部的数据,另一个变量看到的是修改之后的数据
  - 两个应用变量指向同一个对象，让其中一个应用变量指向另一个对象，另一个引用变量依然指向前一个对象
  - 保存的内容都是地址值
  - var obj1 ={name:'Tom'} var obj2 =obj1 obj1.name ='Jack' console.log(obj2.name)//'Jack' var obj1 ={name:'Tom'} var obj2 = obj1 obj2.age =12 console.log(obj1.age)//12 function fn (obj){ obj.name='Bob'//name被修改了 } fn(obj1)//实参赋值给形参 console.log(obj2.name)//Bob 三个引用变量指向一个对象 var a = {age: 12} var b = a a ={name:'BOB',age:13} b.age=14 console.log(b.age,a.name,a.age)//14 Bob 13 function fn2(obj){ obj={age:15}//修改引用变量的值 } fn2(a) console.log(a.age)//13
- 问题：在js调用函数时传递变量参数时，是值传递还是引用传递
  - 理解1：都是值（基本值/地址值）传递
  - 理解2：可能是值传递也可能是引用传递（地址值）
  - var a = 3 function fn (a){ a =a+1 } fn(a) console.log(a)//在等号的左边是写其他都是读 function fn2 (obj){ } var obj ={name:'Tom'} fn2(obj)
- 问题：js引擎如何管理内存？
  - 1、内存生命周期
    - 分配小内存空间，得到它的使用权
    - 存储数据，可以反复进行操作
    - 释放小内存空间
  - 2、释放内存
    - 局部变量只有函数执行的时候产生
    - 函数执行完自动释放
    - 对象：成为一条垃圾对象==>垃圾回收器回收
    - var a =3 var obj ={} obj =undefined function fn(){ var b ={} } fn()//b是自动释放b所指向的对象是在后面的某个时刻由垃圾回收器回收

对象

1、什么是对象？
- 多个数据的封装体
- 用来保存多个数据的容器
- 一个对象代表现实世界中的一个事物
2、为什么要用对象？
- 统一管理多个数据
3、对象的组成
- 属性：属性名称（字符串）和属性值（任意）组成
- 方法：一种特别的属性（属性值是函数）
4、如何访问对象内部数据？
- .属性名 :编码简单，有时不能用
- 【】中括号：编码复杂，通用

var p = {
	name:'Tom',
    age:12,
    setName:function(name){
    	this.name = name
    },
    setAge:function(age){
    	this.age = age
    }
}
p.setName('Bob')
p['setAge'](23)
console.log(p.name,p.setName)
console.log(p.name,p['age'])

什么时候必须使用['属性名']的方式？

1、属性名包含特殊字符 - 空格
2、属性名不确定用变量存

var p={} 
				  
				  
//1给p对象添加属性： content-type：text/json
//p.content-type ='text/json'
				  
p['content-type']='text/json'
console.log(p['content-type'])
				  
//2变量名不确定
var propName='myAge'
var value =18
//p.propName=value 不能用
p[propName]=value

函数

1、什么是函数
- 实现特定功能的n条语句的封装体
- 只有函数是可以执行的其他类型的数据不能执行
2、为什么要用函数？
- 提高代码复用
- 便于阅读交流
3、如何定义函数？
- 函数声明
- 表达式

4、如何调用（执行）函数？

test():直接调用
obj.test():通过对象调用
new test（）：new调用

test.call/apply(obj)：临时让test成为boj的方法进行调用

``` javascript
function showInfo (age){
  if(age<18){
    console.log('未成年，再等等！')
  }else if (age>60){
    console.log('算了吧！')
  }else {
    console.log('刚好！')
  }
}
					  
showInfo(17)
showInfo(20)
showInfo(65)
					  
function fn1(){//表达式
  console.log('fn2()')
}
fn1()
fn2()
					  
var obj = {}
function test2(){
  this.xxx ='atguigu'
}
//obj.test2()不能直接调用，根本就没有
test2.call(obj)//obj.test2()//通过obj调用test2 //可以让一个函数成为指定任意对象的方法进行调用
console.log(obj.xxx)
					  
```

回调函数
- 1、什么函数才是回调函数？
  - 1）你定义的
  - 2）你没有调用
  - 3）但最终它执行了
- 2、常见的回调函数？
  - dom事件回调函数与前端交互
  - 定时器回调函数
  - ajax请求回调函数（后面讲）与后台交互重要的点
  - 生命周期回调函数（后面讲）
- ```
document.getElementById('btn').onclick=function(){//dom事件回调函数
  
  alert(this.innerHTML)
  
}
//定时器
	//超时定时器
	//循环定时器
	//延时定时器
setTimeout(function(){
  alert('到点了')
},2000)
```

IIEF

1理解
- 立即调用函数表达式
2作用
- 隐藏实现
- 不会污染外部空间
- 用它来编写js模块

function(){
  console.log('....')
}//函数没取名，没执行无意义
				  
				  
(function(){//匿名函数自调用
  console.log('....')
})()
				  
(function(){//匿名函数自调用
  var a=3
  console.log(a+3)
})()
var a = 4
console.log(a)
//大括号里面是局部空间。写外面是全局变量a，写里面是局部
				  
;(function(){
  var a = 1
  function test({
    console.log(++a)
  })
  window.$=function({//向外暴露一个全局函数
    return{
    	test:test
  }
  })
})()
  //如果我要取到a（局部变量）
  $().test()//$是函数后面为什么能调用test ，执行后返回的是一个对象 这个对象有一个test方法

this

this 是什么
- 任何函数本质上都是通过某个对象来调用的，如果没有直接指定就是window
- 所有函数内部都有一个变量this
- 它的值是调用当前函数当前对象
如何确定this的值
- test():window
- p.test():p
- new test():新创建的对象
- p.call(obj)：obj

function Person(color){
  console.log(this)
  this.color=color;
  this.getColor=function(){
    console.log(this)
    return this.color;
  };
  this.setColor = function(color){
    console.log(this)
    this.color = color;
    
  };
}
				  
Person('red')//this是谁？ window
				  
var p = new Person("yello");//this是谁？p 指定的是当前对象
p.getColor();//this 是谁？p
var obj={};
p.setColor.call(obj,"black");//this是谁？obj
				  
var test = p.setColor;
test();//this 是window直接调的
				  
function fun1(){
  function fun2(){
    console.log(this);
  }
  fun2()//this 是window
}

函数高级

原型与原型链

原型

函数的prototype

每个函数都有一个prototype属性，它默认指向一个Object空对象（即称为：原型对象）
原型对象中有一个属性constructor，它指向函数对象
作用：函数的所有实例对象自动拥有原型中的属性（方法）

console.log(Date.prototype,typeof Date.prototype)
function Fun(){ //ALT+SHIFT+R(RENAME)
}
console.log(Fun.prototype)//__proto_默认指向一个object空对象没有属性
					  
console.log(Data.prototype.constructor===Date)
console.log(Fun.prototype.constructor===fun)
					  
					  
//给原型对象添加属性（一般是方法）==>实例对象可以访问
Fun.prototype.test =function(){
  console.log('test()')
}
var fun = new Fun()
fun.test()

给原型对象添加属性（一般都是方法）
- 作用：函数的所有实例对象自动拥有原型中的属性（方法）

显式原型与隐式原型

1、每个函数function 都有一个prototype，显式原型
2、每个实例对象都有一个_ proto _,可称为隐式原型
3、对象的隐式原型的值为其对应构造函数的显示原型的值
4、内存结构
5、总结
- 函数的prototype属性：在定义函数时自动添加的，默认值是一个空object对象
- 对象的_ proto _属性：创建对象时自动添加的，默认值为构造函数的prototype属性值
- 程序员能直接操作显示你原型，但不能直接操作隐式原型（ES6之前）

				  
				  function Fn(){ //内部语句：this.prototype={}
				    
				  }
				  //- 1、每个函数function 都有一个prototype，显式原型属性（引用变量），默认指向一个空的object对象
				  console.log(Fn.prototype)
				  //- 2、每个实例对象都有一个_ *proto* _,可称为隐式原型
				  var fn = new.Fn()//内部语句：this.__proto__=Fn.prototype
				  console.log(fn.__proto__)//保存的都是地址值 所以才共同指向原型对象 显示原型
				  //-3、对象的隐式原型的值为其对应构造函数的显示原型的值
				  console.log(Fn.prototype===fn.__proto__)//true
				  //给原型添加方法
				  Fn.prototype.test=function(){
				    console.log('test()')
				  }
				  //通过实例对象调用原型的方法
				  fn.test()

原型链

1、原型链
- 访问一个对象的属性时，
  - 先在自身属性中查找，找到返回
  - 如果没有，再沿着_ proto _这条链向上查找，找到返回
  - 如果最终没找到，返回undefined
- 别名：隐式原型链
- 作用：查找对象的属性（方法）
2、构造函数/原型/实体对象的关系（图解）
3、构造函数/原型/实体对象的关系2（图解）
实例对象的隐式原型属性的值等于构造函数的显式原型的值

function Fn(){
  this.test1=function(){
    console.log('test1()')
  }
}
Fn.prototype.test2=function(){
  console.log('test2()')
}
var fn = new Fn()
fn.test1()
fn.test2()
console.log(fn.toString())
fn.test3()//undefined
				  
test3()
/*
1.函数的显示原型指向的对象：默认是空object实例对象（但是object不满足）
				  
*/
console.log(Fn.prototype instanceof Object)//true
console.log(Object.prototype instanceof Object) //false
console.log(Function.prototype instanceof Object)//true
				  
/*
2.所有函数都是Function 的实例（包括Function它自身）
*/
				  
console.log(Function.__proto__===Function.prototype)
/*
3.object的原型对象是原型链的尽头
*/
console.log(Object.prototype.__proto__)//null

- 查找变量看作用域链
- 查找对象的属性看原型链
- Function对象里面有prototype属性，先要确定是什么类型的值，地址值
- 是引用变量属性

原型链属性问题

1、读取对象的属性值时：会自动到原型链中查找
2、设置对象的属性值时：不会查找原型链，如果当前对象中没有此属性，直接添加此属性并设置其值
3、方法一般定义在原型中，属性一般通过构造函数定义在对象本身上
^^原型链是看属性值的^^

function Fn(){
}
Fn.prototype.a ='xxx'
var fn1 = new Fn()
console.log(fn1.a.fn1)
				  
var fn2 =new Fn()
fn2.a='yyy'
console.log(fn1.a,fn2.a,fn2)//设置属性值的时候不看原型链
				  
				  
function Person(name,age){//属性放在构造函数里初始化
  this.name=name
  this.age=age
}
Person.prototype.setName=function (name){
  this.name=name
}
var p1=new Person('Tom',12)
p1.setName('Bob')
console.log(p1.__proto__===p2.pro)
console.log(p2)

探索instanceof

instanceof 是如何判断的
- 表达式：A instance of B （B是函数，有显式原型，A是实例对象隐式原型）
- 如果B函数的显式原型对象在A对象的原型链上，返回true，否则返回false
funciton是通过new自己产生的实列

/*
案例1
*/
				  
function Foo(){ }
var f1 =new Foo();
console.log(f1 instanceof Foo);//true
console.log(f1 instanceof Object);//true
/*
案例2
*/
console.log(Object instanceof Function)//true
console.log(Object instanceof Object)//true
console.log(Function instanceof Function)//true
console.log(Function instanceof Object);//true
				  
function Foo(){}
console.log(Object instanceof Foo);//false

测试题

``` javascript
/*
测试题1
*/
				  
function A(){
  
}
A.prototype.n = 1
var b = new A()//实例能不能看到n，是通过new的隐式原型属性
A.prototype ={//更新属性本身，指向新的对象，b能不能看到n
  n:2,
  m:3
}
				  
var c = new A()
console.log(b.n,b.m,c.n,c.m)/b.n
				  
				  
/*
测试题2
*/
var F =function(){}
Object.prototype.a =function(){
  console.log('a()')
}
Function.prototype.b = function(){
  console.log('b()')
}
var f = new F()
/*f.a()
f.b()
F.a()
F.b()*/
				  
console.log(f)
console.log(Object.prototype)
```

执行上下文与执行上下文栈（stack）
- 变量提升与函数提升
  - 1、变量声明提升
    - 通过var定义（声明）的变量，在定义语句之前就可以访问到
    - 值：undefined
  - 2、函数声明提升
    - 通过function声明的函数，在之前就可以直接调用
    - 值：函数定义（对象）
  - 3、问题：变量提升和函数提升是如何产生的？
- 执行上下文
  - 代码分类
    - 全局代码
    - 函数代码
- 执行上下文栈
- 面试题
```
``` javascript
  输出undefined
  var a = 3
  function fn(){
   //var a 
    console.log(a)
    var a = 4
  }
  fn()
  				  
  var b = 3
  console.log(b)//undefined 变量提升
  fn2()//可调用 函数提升
  fn3()//不能 变量提升
  var b = 3
  function fn2(){
    console.log('fn2()')
  }
  				  
```
```
作用域与作用域链
闭包

面向对象高级
线程机制与事件机制

sheeplu / JS笔记

基本对象

对象类型

实例-类型对象-实例对象

test.call/apply(obj)：临时让test成为boj的方法进行调用

测试题

面试题

简介

发行版

贡献者

近期动态

sheeplu / JS笔记 .gitee-modal { width: 500px !important; }

基本对象

对象类型

实例-类型对象-实例对象

test.call/apply(obj)：临时让test成为boj的方法进行调用

测试题

面试题

简介

发行版

贡献者

近期动态

搜索帮助

sheeplu / JS笔记