JavaScript高级

柔情只为你懂 2023-07-13 08:27 71阅读 0赞

# 一. 面向对象 #

## **两大编程思想** ##

**面向过程POP：** 分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个依次调用  
优点：性能高，适合跟硬件联系很密切的东西，例如单片机  
**面向对象OOP：** 把事务分解成一个个对象，然后由对象之间分工与合作。每一个对象都是功能中心，具有明确分工。

*  优点：灵活、代码可重复使用、容易维护和开发
 *  特性：封装性、继承性、多态性

# 二. ES6中的类和对象 #

**面向对象的思维特点：**

1.  抽取对象共用的属性和行为组封装成一个类
2.  对类进行实例化，获取类的对象

**对象：** 一组无序的相关属性和方法的集合，所有事物都是对象，例如字符串、数值、数组、函数等；对象由属性（特征）和方法（行为）组成

**类：** 抽象了对象的公共部分，泛指某一大类；对象是特指某一个

## **1.创建类：** ##

class name\{\}

1.  通过class 关键字创建类, 类名我们还是习惯性定义首字母大写
2.  类里面有个constructor 函数（构造函数）,可以接受传递过来的参数,同时返回实例对象
3.  constructor 函数 只要 new 生成实例时,就会自动调用这个函数, 如果我们不写这个函数,类也会自动生成这个函数
4.  生成实例 new 不能省略
5.  最后注意语法规范, 创建类时类名后面不要加小括号,生成实例时类名后面加小括号, 构造函数不需要加function

**类中添加方法：**

1.  我们类里面所有的函数不需要写function
2.  多个函数方法之间不需要添加逗号分隔

## 2. 类的继承 ##

extends  
**super关键字：** 用于访问和调用父类上的函数。可以调用父类的构造函数也可以调用父类的普通函数。super 必须在子类this之前调用

class Father { 
                constructor(x, y) { 
                    this.x = x;
                    this.y = y;
                }
                sum() { 
                    console.log(this.x + this.y);
    
                }
            }
            class Son extends Father { 
                constructor(x, y) { 
                    super(x, y); //调用了父类中的构造函数
                }
            }
            var son = new Son(1, 2);
    son.sum();

继承中的属性或者方法查找原则: 就近原则

1.  继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类的
2.  继承中,如果子类里面没有,就去查找父类有没有这个方法,如果有,就执行父类的这个方法(就近原则)

**三个注意点：**

1.  在ES6 中类没有变量提升，所以必须先定义类，才能通过类实例化对象。
2.  类里面的共有的属性和方法一定要加this使用。
3.  类里面this的指向问题：constructor里面的this指向实例对象，方法里的this指向该方法的调用者

# 三. 构造函数和原型 #

ES6之前，对象不是基于类创建的，而是用构造函数来定义对象和它们的特征

## **1.创建对象的三种方式：** ##

1.  对象字面量  
    var obj1 = \{\}
2.  new Object()  
    var obj2 = new Object();
3.  自定义构造函数

function Star(uname, age) { 
                this.uname = uname;
                this.age = age;
                this.sing = function() { 
                    console.log('我会唱歌');
    
                }
            }
    
            var ldh = new Star('刘德华', 18);
            var zxy = new Star('张学友', 19);

构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与new一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面

## **2. 使用构造函数时应注意的地方：** ##

1.  构造函数用于创建某一类对象，其首字母要大写
2.  构造函数要和new一起使用才有意义

## **3. new在执行时会做的四件事：** ##

1.  在内存中创建一个新的空对象
2.  让this指向这个新对象
3.  执行构造函数里面的代码，给这个新对象添加属性和方法
4.  返回这个新对象（所以构造函数里不需要return）

**实例成员：** 构造函数内部通过this添加的成员；实例成员只能通过实例化的对象来访问  
**静态成员：** 在构造函数本身上添加的成员；静态成员只能通过构造函数来访问

// 构造函数中的属性和方法我们称为成员, 成员可以添加
            function Star(uname, age) { 
                this.uname = uname;
                this.age = age;
                this.sing = function() { 
                    console.log('我会唱歌');
    
                }
            }
            var ldh = new Star('刘德华', 18);
            console.log(ldh.uname);
            ldh.sing();
    
            Star.sex = '男';
            // 静态成员只能通过构造函数来访问
            console.log(Star.sex);
            console.log(ldh.sex); // 不能通过对象来访问

## **4. 构造函数存在浪费内存的问题：** ##

构造函数通过 **原型（prototype）** 分配的函数是所有对象共享的  
JavaScript规定，每一个构造函数都有一个**prototype属性**，指向另一个对象。prototype就是一个对象，这个对象的所有属性和方法都会被构造函数所拥有。  
我们可以把那些不变的方法，直接定义在prototype对象上，这样所有对象的实例就可以共享这些方法  
一般情况下,我们的公共属性定义到构造函数里面, 公共的方法我们放到原型对象身上，这样可以节省内存空间

## **5. 对象原型\_\_proto\_\_：** ##

它指向构造函数的prototype原型对象，之所以对象可以使用构造函数prototype原型对象的属性和方法，就是因为\_\_proto\_\_原型的存在。  
\_\_ proto\_\_和prototype是等价的

## **6. 方法的查找规则:** ##

首先先看对象身上是否有这个方法,如果有就执行这个对象上的方法；如果没有这个方法,因为有\_\_proto\_\_ 的存在,就去构造函数原型对象prototype身上去查找该方法。  
\_\_ proto \_\_ 的意义就在于为对象的查找机制提供一个方向，或者说一条路线，但是它是一个非标准属性，因此在开发中，不可以使用这个属性，他只是内部指向原型对象prototype。

## **7. constructor 构造函数** ##

对象原型（\_\_ proto \_\_）和构造函数原型对象（prototype）里面都有一个属性constructor，称为构造函数，因为它指回构造函数本身，它主要用于记录该对象引用于哪个构造函数，让原型对象指向原来的构造函数  
***注意：*** 如果我们修改了原来的原型对象,给原型对象赋值的是一个对象,则必须手动的利用constructor指回原来的构造函数

Star.prototype = { 
                constructor: Star,
                sing: function() { 
                    console.log('我会唱歌');
                },
                movie: function() { 
                    console.log('我会演电影');
                }
            }

## **8. 构造函数、原型对象、实例之间的关系** ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjg3NTE2_size_16_color_FFFFFF_t_70]

## **9. 原型链：** ##

查找对象成员时的路线  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjg3NTE2_size_16_color_FFFFFF_t_70 1]  
只要是对象就有\_\_proto\_\_的存在

## **10. JavaScript的成员查找机制（规则）：** ##

1.  当访问一个对象的属性（或方法）时，首先查找这个对象有没有该属性（或方法）
2.  如果没有就查找他的原型（也就是\_\_proto\_\_指向的prototype原型对象）
3.  如果还没有就查找原型对象的原型（Object的原型对象）
4.  依次类推一直找到Object为止，货还是没有找到就查找null，返回undefined

如果存在冲突，就近原则

**原型对象的this指向问题：** 指向的是实例对象（调用者）

## **11. 扩展内置对象：** ##

通过原型对象，对原来的内置对象进行扩展自定义的方法

Array.prototype.sum=function() { 
                var sum = 0;
                for (var i = 0; i < this.length; i++) { 
                    sum += this[i];
                }
                return sum;
            };

***注意：*** 数组和字符串内置对象不能给原型对象做覆盖操作Array.prototype=\{\}，只能是追加的方式 Array.prototype.sum =function() \{\}

# 四. 继承 #

ES6之前没有提供extends继承。可以通过**构造函数+原型对象**模拟实现继承，称为**组合继承**。  
**call()：** 调用这个函数，并且修改函数运行的this指向  
fun.call(thisArg,arg1,aeg2…) thisArg：当前调用函数this的指向函数 arg1,aeg2：其他参数

## **1. 继承属性的核心原理：** ##

通过call()把父类型的this指向子类型的this，就可以实现子类继承父类的属性

// 1. 父构造函数
    function Father(uname, age) { 
                // this 指向父构造函数的对象实例
                this.uname = uname;
                this.age = age;
            }
    // 2 .子构造函数 
    function Son(uname, age, score) { 
                // this 指向子构造函数的对象实例
                Father.call(this, uname, age);
                this.score = score;//自己的属性
            }

## 2. 继承方法的原理： ##

// Son.prototype = Father.prototype; 这样直接赋值会有问题,如果修改了子原型对象,父原型对象也会跟着一起变化 ，所以不能使用
    Son.prototype = new Father();
    // 如果利用对象的形式修改了原型对象,别忘了利用constructor 指回原来的构造函数
    Son.prototype.constructor = Son;

# 五. ES5新增方法 #

## 1. 数组方法： ##

**迭代方法：** forEach()、map()、filter()、some()、every()

1.  arr.forEach(function(value, index, array)\{\} ) *map()与其相似*  
    value：数组当前项的值  
    index：数组当前项的索引  
    arr：数组对象本身
2.  arr.filter(function(value, index, array)\{\} )创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素，主要用于筛选数组  
    返回的是新数组  
    value：数组当前项的值  
    index：数组当前项的索引  
    arr：数组对象本身

var arr = [12, 66, 4, 88, 3, 7];
            var newArr = arr.filter(function(value, index) { 
                 return value >= 20;
            });

1.  arr.some(function(value, index, array)\{\} ) 用于检测数组中是否有满足条件的元素 *every()与其相似*  
    返回的值为布尔值，找到了就返回true，没有就返回false  
    如果有一个满足条件的元素就终止循环，不再继续查找  
    value：数组当前项的值  
    index：数组当前项的索引  
    arr：数组对象本身

var arr = [10, 30, 4];
    var flag = arr.some(function(value) { 
    	return value >= 20;
            // return value < 3;
     });

## 2. 字符串方法 ##

trim() 把一个字符串的两端删除空白字符 并不影响字符串本身，返回的是新的字符串  
str.trim()

## 3. 对象方法 ##

1.  Object.keys() 用于获取对象自身的所有属性  
    类似于for…in…  
    返回的是一个由属性名组成的数组
2.  Object.defineProperty(obj,prop,dsecriptor) 定义新属性或修改原有的属性  
    obj：目标对象 必写  
    prop：定义获取修改的属性的名字 必写  
    dsecriptor：目标属性所拥有的特性 必写 对象的形式书写  
    \{ value: 值 ,writable:是否可以被重写 ,enumerable: 是否可以被枚举,configurable: 是否可以被删除或再次修改\}

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjg3NTE2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200311140917169.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjg3NTE2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjg3NTE2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200311140946871.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjg3NTE2,size_16,color_FFFFFF,t_70