javaScript学完js基础，顺便把js高级语法学了（尚硅谷视频学习笔记）
Posted 土狗1990
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javaScript学完js基础，顺便把js高级语法学了（尚硅谷视频学习笔记）相关的知识，希望对你有一定的参考价值。
文章目录
【1】基本总结深入
一、什么是数据
1、数据类型
-
基本（值）类型
- String：任意的字符串
- Nubmer：任意数字
- booleans ：true/false
- underfine ：underfine
- null：null
-
对象（引用）类型
- Object：任意对象
- Function：一种特别的对象（可以执行）
- Array：一种特别的对象（数值下标，内部数据是有序的）
2、判断
-
typeof 返回数据类型的字符串表达
- 可以判断：underfine/数值/字符串/布尔值/function
- 不能判断：null与object， object与array
var b1 = b2:[1,'abc',console.log], b3:function() console.log('b3') return function() return 'xfzhang' console.log(typeof b1.b2)//'object' -
instanceof
- 判断对象的基本类型
-
===
- 可以判断：undefine,null
相关问题
1、underfine与null的区别
- underfine 代表定义未赋值
- null定义了并赋值，值为null
2、 什么时候给变量赋值为null呢？
- 初始赋值，表明将要赋值为对象
- 结束前，让对象成为垃圾对象（被垃圾回收器回收）
3、严格区别变量类型与数据类型
-
数据类型
- 基本类型
- 对象类型
-
变量的类型（变量内存值的类型）
- 基本类型：保存就是基本类型的数据
- 引用类型：保存的是地址值
二、什么是内存
1、什么是数据
- 存储在内存中代表特定信息的东西，本质上是0101……
- 数据的特点：可传递，可运算
- 一切皆数据
- 内存中所有操作的目标：数据
- 算术运算
- 逻辑运算
- 赋值
- 运行函数
2、什么是内存？
-
内存条通电后产生的可存储数据的空间（临时的）
-
内存的产生和死亡：内存条==>通电==>产生内存空间==>存储数据==>处理数据==>断电==>内存空间和数据都消失
-
一块小内存的2个数据
- 内部存储的数据
- 地址值
-
内存分类
- 栈：全局变量/局部变量（空间较小）
- 堆：对象（空间较大）
3、什么是变量
- 可变化的量，由变量名和变量值组成
- 每个变量都对应的一块小内存，变量名用来查找对应的内存，变量值就是内存中保存的数据
4、内存、数据、变量三者之间的关系
- 内存是用来存储数据的空间
- 变量是内存的标识
相关问题
1、问题：var a = xxx，a内存中到底保存的是什么？
- xxx是基本数据，保存的就是这个数据
- xxx是对象，保存的是对象的地址值
- xxx是一个变量，保存的xxx的内存内容（可能是基本数据，也可能是地址值）
2、关于引用变量赋值问题
- 2个引用变量指向同一个对象，通过一个变量修改对象内部数据，另一个变量看到的是修改之后的数据
- 2个引用变量指向同一个对象，让其中一个引用变量指向另一个对象，另一个对象依然指向前一个对象。
var obj1 = name:'Tom'
var obj2 = obj1;
function fn1(obj)
obj.name = 'A';
fn1(obj1)
console.log(obj2.name)//A
function fn2(obj)
obj = name: 'B'
fn2(obj1)
console.log(obj1.name) //A
3、在js调用函数传递变量参数时，是值传递还是引用传递
- 理解1：都是值（基本/地址值）传递
- 理解2：可能值传递，也可能是引用传递（地址值）
4、JS引擎如何管理内存
1、内存生命周期
- 分配小内存空间，得到它的使用权
- 存储数据，可以反复进行操作
- 释放小内存空间
2、释放内存
- 局部变量：函数执行完自动释放
- 对象：成为垃圾对象==>由垃圾回收器回收
var a = 3
var obj =
function fn()
var b =
fn()//b是自动释放，b所指向的对象是在后面的某个时刻由垃圾回收器回收
三、什么是对象
1、什么是对象
- 多个数据的封装体
- 用来保存多个数据的容器
- 一个对象代表现实中的一个事物
2、为什么要用对象
- 统一管理多个数据
3、对象的组成
- 属性：属性名（字符串）和属性值（任意）组成
- 方法：一种特别的属性（属性值是函数）
4、如何访问对象内部数据
- 属性名：编码简单，有时不能用
- [‘属性名’]：编码麻烦，能通用
5、什么时候必须使用[‘属性值’]的方式
1、属性名包含特殊字符： - 空格
2、属性值不确定
var p =
//1、给p对象添加一个属性：content type: text/json
//p.content-type = 'text/json' //不能用
p['content-type'] = 'text/json'
var propName = 'myAge'
var value = 18
//p.propName = value //不能用
p[propName] = value
console.log(p[propName])
四、什么是函数
1、什么是函数
- 实现特定功能的n条语句的封装体
- 只有函数是可以执行的，其他类型的数据不能执行
2、为什么用函数
-
提高代码复用
-
便于阅读交流
3、如何定义函数
//1.函数声明
function fn1()
console.log(1)
//2.表达式
fn2 = function()
console.log(2)
4、如何调用（执行）函数
- test()：直接调用
- obj.test()：通过对象调用
- new test()：new调用
- test.call/apply(obj)：临时让test成为obj的方法调用
var obj =
function test()
this.xxx="atguigu"
//obj.test() 不能直接调用
test.call(obj) //相当于obj.test()
console.log(obj.xxx) // atguigu
5、回调函数
1、什么函数才是回调函数
- 你定义的
- 你没有调用
- 最终它执行了
2、常见的回调函数
- dom事件回调函数
- 定时器回调函数
- ajax请求回调函数
- 生命周期回调函数
6、IIFE
1、理解
- 全称：Imm-Invoked Function Expression
2、作用
- 隐藏实现
- 不会污染外部（全局）命名空间
(function () //匿名函数调用
var a = 3
console.log(a + 3)
)()
var a = 4
console.log(a)
;(function ()
var a = 1
function test ()
console.log(++a)
window.$ = function () //向外暴露一个全局函数
return
test:test
)()
$.test() //1. $是一个函数 2.$执行后返回的是一个对象
//6
//4
//2
7、函数中的this
1、this是什么
- 任何函数本质上都是通过某个对象来调用的，如果没有直接指定就是window
- 所有函数内部都有一个变量this
- 它的值是调用函数的当前对象
2、如何让确定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 ()
console.log(this)
return this.color
;
Person("red"); //this是谁? window
var p = new Person("yello"); //this是谁? p
p.getColor(); //this是谁? p
var obj = ;
p.serColor.call(obj,"black"); //this是谁? obj
var test = p.setColor;
test(); //this是谁? window
function fn1()
function fn2()
console.log(this);
fn2();//this是谁? window
fn1;
【2】函数高级
一、原型与原型链
1、原型
（1）函数的prototype属性
- 每个函数都有一个prototype属性，它默认指向一个Object空对象（原型对象）
- 原型对象中一个属性constructor，它指向函数对象
（2）给原型对象添加属性（一般都是方法）
- 作用：函数的所有实例对象自动拥有原型中的属性（方法）
//每个函数都有一个prototype属性，它默认指向一个Object空对象（原型对象）
console.log(Data.prototype, typeof Date.prototype) //... object
function Fun
console.log(Fun.prototype) //默认指向一个Object空对象
//原型对象中由一个属性constructor，它指向函数对象
console.log(Fun.prototype.constructor === Fun) //true
console.log(Date.prototype.constructor === Date) //true
//给原型对象添加属性（一般是方法） ===> 实例对象可以访问
Fun.prototype.test = function()
console.log('test()')
var fun = new Fun()
fun.test() //test()
2、显示原型与隐式原型
（1）每个函数function都有一个prototype，即显示原型（属性）默认指向一个空的Object对象
（2）每个实例对象都有一个‘ _ _ proto _ _’，可称为隐式原型（属性）
（3）对象的隐式原型的值为其对应构造函数的显式原型的值
（4）内存构造（图）
function Fn()
//内部语句：this.prototype =
//1、每个函数function都有一个prototype，即显示原型（属性）默认指向一个空的Object对象
console.log(Fn.prototype)
//2、每个实例对象都有一个__ proto__，可称为隐式原型（属性）
//创造实例对象
var fn = new Fn() //内部语句：this.__proto__ = Fn.prototype
//3、对象的隐式原型的值为其对应构造函数的显式原型的值
console.log(fn.__proto__ == Fn.prototype) // true
//给原型添加方法
Fn.prototype.test = function()
console.log('test()')
fn.test() // test()
（5）总结
- 函数的prototype属性：定义函数时自动添加的，默认值时一个空Object对象
- 对象的_ _ proto _ _属性：创建对象时自动添加到，默认值为构造函数的prototype属性值
- 程序员能直接操作显示原型，但不能直接操作隐式原型（ES6之前）
3、原型链
（1）原型链
- 访问一个对象的属性值
- 先在自身属性中查找，找到返回
- 如果没有，再沿着 _ _ proto _ _ 这条链向上查找，找到返回
- 如果最终没找到，返回underfined
- 别名：隐式原型链
- 作用：查找对象的属性（方法）
function Fn()
this.test1 = function()
console.log('test1()')
Fn.prototype.test2 = function()
console.log('test1()')
var fn = new Fn()
fn.test1()
fn.test2()
console.log(fn.toString())
fn.test3() //报错
（2）构造函数/原型实例对象的关系
（3）构造函数/原型实例对象的关系2
（4）相关问题
//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.__protp__ === Function.prototype) // true
//3.Object的原型对象是原型链尽头
console.log(Object.prototype.__proto__) //null
4、原型链属性问题
- 读取对象的属性值时：会自动到原型链中查找
- 设置对象的属性值时：不会查找原型链，如果当前对象中没有此属性，直接添加此属性并设置其值
- 方法一般定义在原型中，属性一般通过构造函数定义在对象本身上
function Fn()
Fn.prototype.a = 'xxx'
var fn1 = new Fn()
console.log(fn1.a, fn1) // xxx
var fn2 = new Fn()
fn2.a = 'yyy'
console.log(fn1.a,fn2.a,fn2) // xxx yyy
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) //Bob 12
var p2 = new Person('jack', 12)
p2.setName('Cat')
console.log(p2) // Cat 12
console.log(p1.__proto__ == p2.__proto__) // true 实例对象的隐式原型对象指向构造函数的显示原型对象
5、探索instanceof
1、instanceof是如何判断的？
- 表达式：A instanceof B
- 如果B函数的显示原型对象在A对象的原型链上，返回true，否则返回false
2、Function是通过new自己产生的实例
function Foo()
var f1 = new Foo()
console.log(f1 instanceof Foo) //true
console.log(f1 instanceof Obeject) // true
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 instaenceof Foo) //false
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-968lJYs1-1650793106729)(C:\\Users\\hello world\\AppData\\Roaming\\Typora\\typora-user-images\\1643304158857.png)]
6、面试题
//测试1
function A()
A.prototype.n = 1
var b = new A()
A.prototype =
n: 2,
m: 3
var c = new A()
console.log(b.n, b.m, c.n, c.m) // 1 undenfine 2 3
//测试2
var F = function()
Object.prototype.a = function()
console.log('a()')
Function.prototype.b = function()
console.log('b()')
var f = new F()
f.a() //a()
f.b() //报错
F.a() //a()
F.b() //b()
二、执行上下文与执行上下文栈
1、变量提升与函数提升
（1）变量声明提升
- 通过var定义（声明）的变量，在定义语句之前就可以访问到
- 值：undefined
（2）函数声明提升
- 通过function声明的函数，在之前就可以直接调用
- 值：函数定义（对象）
var a = 3
function fn1()
console.log(a)
var a = 4
fn1() //undenfine 变量提升，fn1函数相当于 var a; console.log(a); a = 4
console.log(b)以上是关于javaScript学完js基础，顺便把js高级语法学了（尚硅谷视频学习笔记）的主要内容，如果未能解决你的问题，请参考以下文章