JavaScript高级

一. 面向对象

两大编程思想

面向过程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. 构造函数、原型对象、实例之间的关系

9. 原型链：

查找对象成员时的路线

只要是对象就有__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;
        });

3. 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: 是否可以被删除或再次修改}