早期尚硅谷-avaScript笔记（函数调用、数据类型判断、原型链、闭包、对象创建、继承)

一：调用函数的方法有哪几种？以及this指代什么？

1：函数形式      fun()     this是windom

2：方法形式 a.fun this是调用方法的对象a

3：构造函数形式 new Fun(） this是新创建的对象

4：call 和 apply 形式 a.call(obj)    this是括号里面传的第一个实参obj

二：数据类型及判断：

 

 

三：原型链（隐式原型链）

--原型链是用来干嘛的？        ==》   查找对象的属性，延隐式原型找，查不到返回undefined

（查找变量，查不到输出会报错）

--函数对象有显式原型属性（prototype），定义函数时自动添加，默认值是一个空的Object实例对象（Object不满足）

--实例对象有隐式原型属性（--proto--），创建对象是自动添加，默认值是构造函数的prototype属性值

        - 实例对象有两种：new Object  (通过构造函数创建的）

                                && 所有函数function（都是Function的实例）

                                （Function 也是Function的实例，Function=new Function)、

--所有函数对象都既有显式原型，又有隐式原型，除了Object的原型对象没有隐式原型（为null）

--所有实例对象的隐式原型属性等于其构造函数的显示原型属性

--所有定义的函数都是Object的实例（除Object）

--Function的显式原型等于自身隐式原型

--Object的原型对象是原型链的尽头

作用域用来干嘛        ==》 隔离变量，不同作用域下同名变量不会有冲突！

作用域链用来干嘛？        ==》 查找变量，由内向外，找不到报错

作用域个数：n + 1，(n是定义了n个函数，1是全局作用域） 

-----作用域是静态的（相对于上下文对象），在编写代码时就产生了

函数执行上下文

1.在调用函数，准备执行函数体之前，创建对应的函数执行上下文对象
2.对局部数据进行预处理：
        -形参变量 ====> 赋值（实参数据） ==> 添加为执行上下文的属性
        -arguments ====> 赋值（实参列表），添加为执行上下文的属性
        -var定义的局部变量 ===> undefined，添加为执行上下文的属性
        -function声明的函数 ===> 赋值（fun），添加为执行上下文的属性
        -this ===> 赋值（调用函数的对象）
3.开始执行函数体代码

----执行上下文个数：n + 1，(n是调用函数次数，1是全局）

----执行上下文是动态产生，调用函数时产生，函数执行完死亡

执行上下文栈

1. 在全局代码执行前，JS引擎就会创建一个栈来存储管理所有的执行上下文对象
2. 在全局执行上下文（window）确定后，将其添加到栈中（压栈）
3. 在函数执行上下文创建后，将其添加到栈中（压栈）
4. 在当前函数执行完后，将栈顶的对象移除（出栈）
5. 当所有的代码执行完后，栈中只剩下window

--instance of 是如何判断的？    

        表达式 A instance of B

 ==》   如果B函数的显式原型对象在A对象的原型链上，返回ture ，否则返回false

四：闭包

如何产生闭包？

当一个嵌套的内部（子）函数引用了嵌套的外部（父）函数的变量（函数）时，就产生了闭包

闭包的个数 = 调用外部函数的次数

闭包到底是什么？

1. 闭包是嵌套的内部函数
2. 闭包是包含被引用变量（函数）的对象

 注：执行函数定义就会产生闭包（不用调用内部函数）

怎么看闭包个数？  ===》  等于外部函数调用次数

闭包的作用是什么？  ===》   延长局部变量的生命周期

1. 使函数内部的变量在函数执行完后，仍然存活在内存中（延长了局部变量的生命周期）
2. 让函数外部可以间接操作（读写）到函数内部的数据（变量/函数）

闭包的生命周期 

1. 产生：在嵌套内部函数定义执行完时就产生了（不是在调用）
2. 死亡：在嵌套的内部函数成为垃圾对象时

 闭包应用：自定义JS模块

1. JS模块：具有特定功能的JS文件

2. 将所有的数据和功能都封装在一个函数内部

3. 只向外暴露一个包含n个方法的对象或函数

4. 模块的使用者，只需要通过模块暴露的对象调用方法来实现相应功能

常见闭包：

1.将函数作为另外一个函数的返回值

⭐⭐⭐

<script>
 function fn1(){
    var a = 2
    function fn2(){
        a++
        console.log((a))
    }
    return fn2
}
var f = fn1()
f() //3
f() //4
</script>

2.将函数作为实参传递给另一个函数调用

<script>
    function showDelay(mes,time){
        setTimeout(function(){
            alter(msg) // 如果将这句话注释掉，就没有产生闭包，说白了，必须在子函数里调用复函数的变量
        },time)
    }
    showDelay('atguigu',2000)
</script>
————————————————

 内存泄漏

1. 闭包缺点：
   • 函数执行完后，函数内的局部变量没有释放，占用内存时间会变长
   • 容易造成内存泄漏（内存被垃圾对象占用）
2. 解决：
   • 能不用闭包就不用
   • 及时释放
3. 常见的内存泄漏：
   • 意外的全局变量（没用var定义局部变量）
   • 没有及时清理的计时器或回调函数
   • 闭包

内存溢出 

1. 内存溢出是一种程序运行出现的错误，当程序运行需要的内存超过了剩余的内存时，就会抛出内存溢出的错误。
2. 内存泄漏是指没有及时释放占用的内存，内存泄漏积累多了就容易导致内存溢出

五. 对象创建的模式

方式1：Object构造函数模式

先创建空Obeject对象，然后动态添加属性、方法
使用场景：起初不确定对象内部数据
问题：语句太多
方式2：对象字面量模式

使用{}创建对象，同时指定属性、方法
使用场景：起初时对象内部数据是确定的
问题：如果创建多个对象，有重复代码
方式3：工厂模式

通过工厂函数动态创建对象并返回
使用场景：需要创建多个对象
问题：对象没有一个具体的类型，都是Object类型

方式4：自定义构造函数模式

自定义构造函数，通过new创建对象

使用场景：需要创建多个类型确定的对象

问题：每个对象都有相同的数据（方法），浪费内存

方式5：构造函数+原型的组合模式

自定义构造函数，属性在函数中初始化，方法添加到原型上

使用场景：需要创建多个类型确定的对象

六. 继承模式

原型链继承    ===》是为了得到方法

1. 定义父类的构造函数，给父类的原型添加方法
2. 定义子类的构造函数
3. 创建父类的对象赋值给子类的原型
4. 将子类的原型的构造属性设置为子类型

   目录

    继承模式

   ---

5. 给子类型原型添加方法
6. 给子类型原型添加方法
7. 创建子类型的对象：可以调用父类型的方法
8. 关键：子类型的原型为父类型的实例  (例： Child.prototype = new Parent）
9. 修正语句（例： Child.prototype.constructor = Child）

借用构造函数继承  ====》 是为了得到属性（用call改变this指向）

function Person(name,age){
    this.name = name;
    this.age = age;
}
function Student (name,age,price){
    Person.call(this,name,age)  //相当于 this.Person(name.age)
    
    // this.name = name;
    // this.age = age;
    
    this,price = price;
}

var s = new Student('Tom',20,14000)
console.log(s.name,s.age,s.price);

组合继承 

function Person(name,age){
    this.name = name;
    this.age = age;
}
Person.prototype.setName = function(name){
        this.name = name;
}
function Student (name,age,price){
    Person.call(this,name,age)  //相当于 this.Person(name.age)
    
    // this.name = name;
    // this.age = age;
    
    this.price = price;
}
Student.prototype = New Person()  // 为了能看到父类的方法
Student.prototype.constructor = Student //修正constructor属性
Student.prototype.setPrice = function (price){
    this.price = price
}

var s = new Student('Tom',24,15000)
s.setName('Bob')
s.setPrice(16000)
console.log(s.name,s.age,s.price) // Bob 24 16000