JavaScript 高级

梦里梦外; 2021-10-15 17:35 402阅读 0赞

JS最初的目的：解决用户与服务器之间的交互问题

js:          是一门脚本语言。不用编译，直接执行

是一门解释性语言。遇到一行就执行一行。

是弱类型语言。      定义变量都用var

是基于对象语言。没有面向对象的三大特性：继承 封装 多态，但是可以模拟面对对象的思想（继承 封装 多态）

是动态驱动。1. 执行到某一行代码时，才知道变量存储的是什么，知道对象的属性方法，变量的作用等等。

2.对象什么也没有，通过.点语法，就可以给对象添加属性和方法

--------------------

.如何判断对象是不是这个数据类型?  
   1)通过构造器的方式  实例对象.构造器==构造函数名字    obj.constrouct  == Object  （通过console.dir可以输出对象的结构）

2)对象instanceof 构造函数名字  
推荐使用第二种方式

var  obj = new  Student() ; //实例对象

function Stundent() \{  \}     //构造函数

实例对象 、构造函数、原型对象关系：

1.实例对象是通过构造函数来创建的- --创建的过程叫实例化

实例化堆栈变化：    1.开辟空间存储对象

2.把this设置为当前对象

3.设置对象的属性和方法

4.返回这个this对象

构造函数可以实例化对象  
  
       构造函数中有一个属性prototype,是构造函数的原型对象  
  
      构造函数的原型对象(prototype)中有一个constructor构造器 指向的是自己所在的原型对象所在的构造函数  
  
      实例对象的原型对象(\_\_ proto\_ ) 指向的是该构造函数的原型对象  
  
      构造函数的原型对象(prototype)中的方法是可以被实例对象直接访问的

原型的作用：   一 、进行数据共享，节省内存空间；     //需要共享的数据（属性、方法）都可以写到原型中

二、为了实现继承

原型或者构造函数中的对象可以通过this相互调用

对象在调用其构造函数的方法时，如果有多个对象obj1 ，obj2 obj3 都调用同一个方法play()，因为是不同的对象 ，所以obj1.play 是不等于 obj2.play ，这些方法都会开辟一块空间，造成空间浪费，为了节省空间，有两种方法，

一、将函数内的方法 赋值给一个变量 ，在函数体外设置与变量同名的函数

//好处是只开辟一块空间，坏处是若有另一个变量与函数同名会造成错误，所以采用原型方式

二、采用原型的方式， Object.prototype.play = function () \{  \}

var obj1 = new  Object（"七七"）；

如何把局部变量变全局变量？

将局部变量给window 函数自调用传入window对象

改变原型指向 ：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk4MDA4Nw_size_16_color_FFFFFF_t_70][]

访问st.study() 这个方法是会报错，因为此时的Student 的原型指向改变了，由原来指向Student构造函数  变成了指向实例对象new Person（），而实例对象 new Person()没有这一个方法所以会报错。

解决 ： 在改变原型指向后 添加方法 。Student.prototype.study = function()\{\}  放到原型指向后，

此时方法添加到实例对象中

实例对象与原型对象点属性 同名时：

实例对象访问属性时，先从实例对象中查找， 找不到 从原型中寻找，返回原型中的属性值，如果找不到，返回undefined

实例对象无法修改原型对象中属性的值，若要修改通过 原型对象.属性 =值

**原型链：**实例对象 和原型对象之间的关系通过 \_\_proto\_\_  联系

实例对象中有\_ proto\_ 原型        指向的是构造函数的prototype

构造函数中有  prototype原型      prototype是对象 ，所以prototype対象中也有\_ proto\_ ,  指向的是Object. prototype

Object. prototype中的\_ proto\_ 是null

只要是对象，就有\_proto\_ 原型， 指向与它关联的某个构造函数的 prototype原型对象

（只要是函数，就有prototype原型对象）

面向对象的特性: 封装，继承，多态

继承也是为了实现数据共享，但是js中是没有类的，用构造函数实现继承的思想

**实现继承：**一、改变原型指向继承

二 、借用构造函数        在子类中 调用父类的构造函数 ，例子  Animate 父类 Dog子类

Animate.call（this , 属性1，属性2.....）      //this指当前对象，也就是Dog的实例对象

// 缺点：只能继承属性，不能继承方法

三、两者结合，组合继承

方法使用改变原型指向，Dog.prototype  = new Animate（）时，不传值

Dog.prototype .eat  = function ()\{    \}

属性借用构造函数   在子类中 调用父类的构造函数

4. 拷贝继承：把对象中需要共享的属性或者方法，直接循环遍历 复制到另一个对象中

--------------------

函数：

函数声明·的两种方式：

函数声明   function f1() \{  \}                    //函数声明在IE8会出错，尽量用函数表达式

函数表达式 var f1 = function () \{\}

函数中的一些属性：

arguments       实参的个数  
             length          函数定义的时候形参的个数

caller              函数的调用者          (f1函数在f2函数中调用的，所以,此时调用者就是f2)

判断当前this 对象指向：

普通函数中的this ----window

构造函数中的this----实例对象

定时器方法中的this----window  
        对象.方法中的this ---当前的实例对象

原型对象方法中的this---实例对象

var x=10;   //全局变量
            var f = {
                x:99,
                getX:function(){
                    return this.x;
                }
            };
    
          f.getX();  //99 相当于f.getX.call(f)，this对象是f
    
          var x1 = f.getX;   //x1全局变量   window.x1
          x1()  //10 ,  相当于 window.x1()

**  call( )、apply( ) 方法**

** **    函数调用

f1.call（对象，参数）

f1.apply（对象，【参数】）        //函数中有\_proto\_ ,所以函数也是对象，通过对象来调用方法

apply call方法没有传入参数，或者传入的参数是null，那么此时默认的对象是window

**apply( ) 、  call( )**改变this 指向：

目的：为了让一个对象使用其他对象的方法

apply（）：

函数名字.apply （对象 ，\[ 参数1，参数2....\]）                 //改变函数中的this指向    此时函数中的对象就是传进来的对象

实例对象.方法名.apply （对象 ， \[参数1，参数2，....\]） //改变 方法的this 指向     此时方法中的对象就是传进来的对象

call（）：

函数名字.call （对象 ， 参数1，参数2....）                 //改变函数中的this指向    此时函数中的对象就是传进来的对象

实例对象.方法名.call（对象 ， 参数1，参数2，....）  //改变 方法的this 指向     此时方法中的对象就是传进来的对象

bind（）方法 是用来复制

函数名字.bind（对象 ， 参数1，参数2....）          返回值是函数

实例对象.方法名. bind（对象 ， 参数1，参数2，....）    返回值是方法

*  函数作为参数： 匿名函数 或命名函数

当匿名函数作为sort的方法的参数使用时，此时的匿名函数有两个参数

实现数组排列：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk4MDA4Nw_size_16_color_FFFFFF_t_70 1][]

*  函数作为返回值：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk4MDA4Nw_size_16_color_FFFFFF_t_70 2][]

**闭包：**

在函数A中，有一个函数B，函数B访问A中定义的变量或者数据， 此时就形成了一个闭包

（内部作用域自然可以访问外部作用域的变量，因为这是有作用域链，而闭包的产生可以让外部作用域可以访问内部作用域，闭包是在调用内部函数的时候产生的，并不是只要有两个函数嵌套就是闭包）

闭包的模式:   函数模式的闭包  （一个函数中有一个函数）

对象模式的闭包   （一个函数中有一个对象）

闭包的作用:缓存数据，延长作用域链

闭包的优点和缺点:缓存数据

闭包的应用

闭包作用：缓存数据

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk4MDA4Nw_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk4MDA4Nw_size_16_color_FFFFFF_t_70 4][]

**沙箱:** 在一个虚拟的的环境中模拟一个真实的世界（函数的自调用过程）

一、（function ()\{｝)  ()；

二、（function()\{ \}  ()）;

作用：解决变量名函数名 命名冲突问题，都放到函数自调用中去。

递归：在函数中自己调用自己，一定要有结束条件，否则容易造成死循环

**浅拷贝：**创建一个新的对象，遍历需要拷贝的对象，将需要拷贝的对象的属性依次添加到新对象上，返回这个新对象。

//两个对象之间有共同的属性 /方法，都可以使用。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk4MDA4Nw_size_16_color_FFFFFF_t_70 5][]

注意：赋值与浅拷贝区别  ，改变赋值得到的对象值  同时也会改变 原始值，

而改变浅拷贝得到的对象 则不会改变原始对象（前提是原始对象不含有数组或对象）。

这就可以说明赋值得到的对象 只是将指向改变，其引用的仍然是同一个对象

而浅拷贝得到的 则是重新创建了新对象。

当原始对象中有数组\[ \]或对象\{ \}时，由于浅拷贝只复制一层对象的属性，并不包括对象里面的引用类型的数据。所以改变浅拷贝中的引用类型时，会使原始数据改变。

**深拷贝（递归）**：深拷贝是对 对象以及对象的所有子对象 进行拷贝。由于不知道要拷贝的对象引用类型有多少层深度，所以        用递归实现。

如果是原始类型（简单的属性），无需继续拷贝，直接返回

如果是引用类型，创建一个新的对象，遍历需要克隆的对象，将需要克隆对象的属性执行**深拷贝后**依次添加到新对象上。

**遍历DOM树（递归）：**

--------------------

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk4MDA4Nw_size_16_color_FFFFFF_t_70]: /images/20211015/46e24eba196243a2aeb9f08dc8040829.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk4MDA4Nw_size_16_color_FFFFFF_t_70 1]: /images/20211015/0d24c22015f94eb3a1b4a04735c6ccd3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk4MDA4Nw_size_16_color_FFFFFF_t_70 2]: /images/20211015/3a7b02bea3f146e99f478083e12dd12c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk4MDA4Nw_size_16_color_FFFFFF_t_70 3]: /images/20211015/58cd6079370a47d28f3dc1d0df596fc0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk4MDA4Nw_size_16_color_FFFFFF_t_70 4]: /images/20211015/2dfb34f690624f6d9af2d3f186df92f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk4MDA4Nw_size_16_color_FFFFFF_t_70 5]: /images/20211015/70d18220edde4e19aa6be364bea60e3a.png