javaScript高级[一]

最新推荐文章于 2024-11-02 12:42:04 发布

七更醉

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量430

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_38393535/article/details/122841806

版权

前端专栏收录该内容

22 篇文章 1 订阅

订阅专栏

javaScript高级[一]

面向对象
构造函数和原型
继承
ES5新增方法

面向对象

面向对象编程介绍

面向过程思想

面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。

举个栗子∶将大象装进冰箱，面向过程做法。
1、打开冰箱门
2、大象装进去
3、关闭冰箱

面向过程，就是按照我们分析好了的步骤，按照步骤解决问题。

面向对象思想

面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。

举个栗子∶将大象装进冰箱，面向对象做法。
先找出对象，并写出这些对象的功能︰
1 大象对象
进去
⒉冰箱对象
打开
关闭
3 使用大象和冰箱的功能

面向对象是以对象功能来划分问题，而不是步骤。

ES6中的类和对象

面向对象的思维特点:
1．抽取（抽象）对象共用的属性和行为组织(封装)成一个类(模板)；
2．对类进行实例化,获取类的对象。
面向对象编程我们考虑的是有哪些对象，按照面向对象的思维特点不断的创建对象，使用对象，指挥对象做事情

对象

在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。

对象是由属性和方法组成的∶
属性︰事物的特征，在对象中用属性来表示(常用名词)
方法∶事物的行为，在对象中用方法来表示(常用动词)

类

类抽象了对象的公共部分，它泛指某一大类( class )对象特指某一个，通过类实例化一个具体的对象

创建类

语法

<script>
    // 1. 创建类class
    class className {
		// class body
    }
    // 2. 创建对象new
    new className();
</script>

类constructor构造函数

constructor()方法是类的构造函数(默认方法)，用于传递参数，返回实例对象，通过new命令生成对象实例时，自动调用该方法。
如果没有显示定义，类内部会自动给我们创建一个constructor()

<script>
    // 1. 创建类class
    class Star {
        // new的时候自动调用constructor
        constructor(uname, age) { // constructor可以传递参数
            this.uname = uname;
            this.age = age;
        }
    }
    // 2. 创建对象new
    var ldh = new Star("刘德华", 18); // constructor可以返回实例对象
    var zxy = new Star("张学友");
    console.log(ldh); // Star {uname: "刘德华", age: 18}
    console.log(zxy); // Star {uname: "张学友", age: undefined}
    console.log(ldh.age); // 18
    console.log(zxy.uname); // 张学友

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

在类中添加方法

语法：

class Person {
	constructor (name, age) {	// constructor构造器或者构造函数
	this.name = name;
	this.age = age;
	}
	say () {
		console. log (this.name + "你好");
	}
}

<script>
    // 1. 创建类class
    class Star {
        // 类的共有属性放到constructor里面
        constructor(uname, age) {
                this.uname = uname;
                this.age = age;
            } // ，这里不加逗号
        sing(song) {
            console.log(this.uname + song);
        }
    }
    // 2. 创建对象new
    var ldh = new Star("刘德华", 18);
    var zxy = new Star("张学友");
    console.log(ldh); // 依然打印 Star {uname: "刘德华", age: 18}   因为new的时候只调用constructor，所以这里打印的内容不包括sing
    console.log(zxy); // 依然打印 Star {uname: "张学友", age: undefined}

    ldh.sing('冰雨'); // 刘德华冰雨 ldh调用了sing函数，那么sing中的this就指向ldh,那么sing中的this.name就是ldh.name
    zxy.sing('李香兰'); // 张学友李香兰

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

类的继承

语法

// 1. 类的继承
class Father {
}
class Son extends Father {
    // 此时已经实现了继承
}

举例

<script>
        // 1. 类的继承
        class Father {
            constructor() {

            }
            money() {
                console.log(100);
            }
        }
        class Son extends Father {
            //此时已经实现了继承
        }
        var son = new Son();
        son.money(); // 100
</script>

super关键字

super 关键字用于访问和调用对象父类上的函数。
可以调用父类的构造函数，也可以调用父类的普通函数

super关键字调用父类构造函数举例

<script>
    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) {
            //错误写法
            // this.x = x;
            // this.y = y;

            //正确写法  调用父类中的构造函数
            super(x, y);
        }
    }
    var son = new Son(1, 2); //按照错误写法，这里的实参只能传到Son的构造函数里，传不到Father的构造函数中，那么sum就接收不到参数，无法进行运算
    son.sum(); //3    son自己本身没有sum方法，但是son继承了father的方法，所以这里执行father.sum()
</script>

但是这样就可以

<script>
    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);
            this.x = x;
            this.y = y;
        }
    }
    var son = new Son(1, 2); //按照错误写法，这里的实参只能传到Son的构造函数里，传不到Father的构造函数中，那么sum就接收不到参数，无法进行运算
    son.sum(); //3
</script>

这样的写法也没错

<script>
    class Father {
        constructor(x, y) {
            this.x = x;
            this.y = y;
        }
        sum() {
            console.log(this.x + this.y);
        }
    }
    class Son extends Father {
    }
    var son = new Son(1, 2);// son自己没有构造函数，那就是执行了父亲的构造函数，1和2都传给了父亲
    son.sum(); // 3
</script>

但是下面这样写就会报错

<script>
    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) {
            // 这样就会报错
        }
    }
    var son = new Son(1, 2);
    son.sum(); 
</script>

上述举例说明，子类重写父类的方法，就会覆盖从父类继承过来的方法，以下例子也是同样的道理

<script>
    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);
        }
        sum() {
            console.log(this.x - this.y);
        }
    }
    var son = new Son(1, 2);
    son.sum(); // -1   子类的sum将父类的sum覆盖掉了
</script>

super关键字调用父类普通函数举例

<script>
    // super 关键字调用父类普通函数
    class Father {
        say() {
            return '我是爸爸';
        }
    }
    class Son extends Father {
        say() {
            console.log(super.say() + '的儿子');
            // super.say() 就是调用父类中的普通函数 say()
        }
    }
    var son = new Son();
    son.say();
    // 继承中的属性或者方法查找原则: 就近原则
    // 1. 继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类的
    // 2. 继承中,如果子类里面没有,就去查找父类有没有这个方法,如果有,就执行父类的这个方法(就近原则)
</script>

子类继承父类方法的同时扩展自己的方法

注意：子类在构造函数中使用super，必须放到this前面(必须先调用父类的构造方法，在使用子类构造方法)

<script>
    // 父类有加法方法
    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 必须在子类this之前调用  super()放在第一行
            super(x, y); //利用super 调用父类的构造函数  这样子类的参数5，3才会传给父类的构造函数，sum()才会接收到5，3
            this.x = x;
            this.y = y;
        }
        subtract() {
            console.log(this.x - this.y);
        }
    }
    var son = new Son(5, 3);
    son.subtract();// 2
    son.sum();// 8
</script>

以下这样的写法也是正确的，以下是子类有自己的构造方法，只是在自己的构造方法中调用了父类的构造方法

<script>
    // 父类有加法方法
    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 必须在子类this之前调用  super()放在第一行
            super(x, y); // 利用super 调用父类的构造函数  这样子类的参数5，3才会传给父类的构造函数，sum()才会接收到5，3
            console.log(this);// Son {x: 5, y: 3}
        }
        subtract() {
            console.log(this.x - this.y);
        }
    }
    var son = new Son(5, 3);
    son.subtract();//2   
    son.sum();//8
</script>

注意：子类继承父类的构造方法以及子类，在自己的构造方法中调用父类构造方法的区别

ES6中类和对象的3个注意点

在ES6中类没有变量提升，所以必须先定义类，才能通过类实例化对象。
类里面的共有属性和方法一定要加this使用

<script>
    class Star {
        constructor(uname, age) {
            this.uname = uname;
            this.age = age;
            this.sing(); // 在构造函数内部调用普通函数前面要加this 函数前面的this
        }
        sing() {
            console.log(this.uname);// 函数里面的this
        }
    }
    var ldh = new Star('刘德华'); // 类实例化对象放在类定义的后面    实例化的时候自动调用sing()
    console.log(ldh); // Star {uname: "刘德华", age: undefined}
</script>

函数前面的this和函数里面的this都指向函数的调用者。
更深入的理解：

<button>点击</button>
<script>
    class Star {
        constructor(uname, age) {
            this.uname = uname;
            this.age = age;
            this.btn = document.querySelector('button');
            this.btn.onclick = this.sing;
            // 对于这些共有的属性和方法的前面一定要加this ,因为这些属性和方法是属于实例对象的，而this就是指向我们的实例对象
            // this.btn.onclick = this.sing;表示点击完成之后调用该函数
            // this.btn.onclick = this.sing();表示实例化对象的时候就调用该函数
        }
        sing() {
            console.log(this.uname);
        }
    }
    var ldh = new Star('刘德华'); // 类实例化对象放在类定义的后面    
    console.log(ldh); // Star {uname: "刘德华", age: undefined, btn: button}
    // 点击按钮之后调用sing()打印undefine
</script>

类里面的this指向问题。
constructor里面的this指向实例对象，方法里面的this指向这个方法的调用者

<body>
    <button>点击</button>
    <script>
        var that;
        var _that;
        class Star {
            constructor(uname, age) {
                this.uname = uname;
                this.age = age;
                this.btn = document.querySelector('button');
                this.btn.onclick = this.sing;

                // 1. constructor 里面的this 指向的是 创建的实例对象
                that = this;
                console.log(this); // Star {uname: "刘德华", age: undefined, btn: button}
            }
            sing() {
                // 2. 普通函数的this指向的是它的调用者
                console.log(this); // <button>点击</button>   这个sing方法里面的this 指向的是 btn 这个按钮,因为这个按钮调用了这个函数
                console.log(this.uname); // undefine     btn中没有uname这个属性，所以打印undefine
                console.log(that.uname); // 刘德华       that里面存储的是constructor里面的this,所以打印刘德华
            }
            dance() {
                // 2. 普通函数的this指向的是它的调用者
                _that = this; // 这个dance里面的this 指向的是实例对象 ldh 因为ldh 调用了这个函数
                console.log(this); // Star {uname: "刘德华", age: undefined, btn: button}
            }
        }
        var ldh = new Star('刘德华');
        console.log(that === ldh); // true  证明了constructor 里面的this 指向的是 创建的实例对象
        ldh.dance();
        console.log(_that === ldh); // true  证明了dance里面的this 指向的是实例对象 ldh 因为ldh 调用了这个函数
    </script>
</body>

构造函数和原型

概述

在典型的OOP的语言中(如Java )，都存在类的概念，类就是对象的模板，对象就是类的实例，但在ES6之前，JS中并没用引入类的概念。
ES6，全称ECMAScript 6.0，2015.06发版。但是目前浏览器的JavaScript是ES5版本，大多数高版本的览器也支持ES6，不过只实现了ES6的部分特性和功能。
在ES6之前，对象不是基于类创建的，而是用一种称为构建函数的特殊函数来定义对象和它们的特征。

创建对象可以通过以下三种方式∶

1.对象字面量
2.new Object
3.自定义构造函数

构造函数

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

new在执行时会做四件事情：

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

例子

ES5中创建对象的方式(复习)

<script>
    // 1. 利用 new Object() 创建对象
    var obj1 = new Object();

    // 2. 利用 对象字面量创建对象
    var obj2 = {};

    // 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);
    console.log(ldh);//Star {uname: "刘德华", age: 18, sing: ƒ}
    ldh.sing();
    zxy.sing();
    console.log(ldh.uname);//刘德华
</script>

ES6中创建对象的方式(类)


<script>
    // 1. 创建类class
    class Star {
        // new的时候自动调用constructor
        constructor(uname, age) { // constructor可以传递参数
            this.uname = uname;
            this.age = age;
        }
    }
    // 2. 创建对象new
    var ldh = new Star("刘德华", 18); // constructor可以返回实例对象
    console.log(ldh); // Star {uname: "刘德华", age: 18}
</script>

JavaScript的构造函数中可以添加一些成员，可以在构造函数本身上添加，也可以在构造函数内部的this上添加。通过这两种方式添加的成员，就分别称为静态成员和实例成员。
静态成员∶在构造函数本上添加的成员称为静态成员，只能由构造函数本身来访问
实例成员∶在构造函数内部创建的对象成员称为实例成员，只能由实例化的对象来访问

<script>
    // 构造函数中的属性和方法我们称为成员, 成员可以添加
    function Star(uname, age) {
        this.uname = uname;
        this.age = age;
        this.sing = function() {
            console.log('我会唱歌');
        }
    }
    var ldh = new Star('刘德华', 18);

    // 1.实例成员就是构造函数内部通过this添加的成员 uname age sing height就是实例成员
    // JS是一门动态语言，可以直接这样添加实例成员，如下
    ldh.height = 180;
    // 实例成员只能通过实例化的对象来访问,如下
    console.log(ldh.uname);
    console.log(ldh.height);
    ldh.sing();
    console.log(ldh); //Star {uname: "刘德华", age: 18, height: 180, sing: ƒ}
    // 实例成员不可以通过构造函数来访问实例成员，如下
    // console.log(Star.uname);


    // 2. 静态成员 在构造函数本身上添加的成员，如下：  
    Star.sex = '男'; //sex 就是静态成员
    // 静态成员只能通过构造函数来访问
    console.log(Star.sex); // JS是一门动态语言，可以直接这样添加静态成员
    console.log(ldh); // {uname: "刘德华", age: 18, height: 180, sing: ƒ}
    // 不能通过对象来访问
    // console.log(ldh.sex);
</script>

构造函数的问题

在这里插入图片描述

<script>
    // 1. 构造函数的问题. 
    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);
    console.log(ldh.sing === zxy.sing);//false   比较这两个函数的时候比较的是地址
</script>

构造函数原型prototype

构造函数通过原型分配的函数是所有对象所共享的。
JavaScript规定，每一个构造函数都有一个prototype属性，指向另一个对象。注意这个prototype就是个对象，这个对象的所有属性和方法，都会被构造函数所拥有。
可以把那些不变的方法，直接定义在prototype对象上，这样所有对象的实例就可以共享这些方法。

<script>
    // 1. 构造函数的问题. 
    function Star(uname, age) {
        this.uname = uname;
        this.age = age;
        // this.sing = function() {
        //     console.log('我会唱歌');

        // }
    }
    Star.prototype.sing = function() { //在原型对象里添加sing这个方法   因为对象可以动态地添加属性和方法
        console.log('我会唱歌');
    }
    var ldh = new Star('刘德华', 18);
    var zxy = new Star('张学友', 19);
    console.log(ldh.sing === zxy.sing); //true   比较这两个函数的时候比较的是地址
    // console.dir(Star);  // 发现prototype这个属性，这个属性的值是用{}表示的，可见Star的prototype属性就是一个对象
    ldh.sing(); //我会唱歌
    zxy.sing(); //我会唱歌
    // 2.一般情况下,我们的公共属性定义到构造函数里面, 公共的方法我们放到原型对象身上
</script>

对象原型proto

对象都会有一个属性__proto__指向构造函数的prototype原型对象，之所以我们对象可以使用构造函数prototype原型对象的属性和方法，就是因为对象有__proto__原型的存在。

__proto__对象原型和原型对象prototype是等价的
__proto__对象原型的意义就在于为对象的查找机制提供一个方向，或者说一条路线，但是它是一个非标准属性，因此实际开发中，不可以使用这个属性，它只是内部指向原型对象prototype

<script>
    function Star(uname, age) {
        this.uname = uname;
        this.age = age;
    }
    Star.prototype.sing = function() {
        console.log('我会唱歌');
    }
    var ldh = new Star('刘德华', 18);
    var zxy = new Star('张学友', 19);
    ldh.sing();
    console.log(ldh); // 对象身上系统自己添加一个 __proto__ 指向我们构造函数的原型对象 prototype
    console.log(ldh.__proto__ === Star.prototype);// true 
    // 方法的查找规则: 首先先看ldh 对象身上是否有 sing 方法,如果有就执行这个对象上的sing
    // 如果没有sing 这个方法,因为有__proto__ 的存在,就去构造函数原型对象prototype身上去查找sing这个方法
</script>

在这里插入图片描述

对象原型指向的是构造函数的原型对象，对象原型是一个非标准属性，实际开发的时候，不可以对其进行赋值等操作。

构造函数constructor

对象原型(__proto__)和构造函数(prototype )原型对象里面都有一个属性constructor属性，constructor我们称为构造函数，因为它指回构造函数本身。

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

constructor主要用于记录该对象引用于哪个构造函数，它可以让原型对象重新指向原来的构造函数。

<script>
        function Star(uname, age) {
            this.uname = uname;
            this.age = age;
        }
        // 很多情况下，需要利用constructor 这个属性指回原来的构造函数
        // Star.prototype.sing = function() {
        //     console.log('我会唱歌');
        // }
        // Star.prototype.movie = function() {
        //     console.log('我会演电影');
        // }
        // Star.prototype是一个对象，
        // 如果采用Star.prototype.sing = function(){}的形式，那就是在这个对象里追加公共方法。
        // 但是若采用第二种方法Star.prototype = {}添加公共方法，
        // 这就是对Star.prototype这个对象赋值，将Star.prototype对象中原先的内容全部覆盖了，那么Star.prototype中就没有constructor这个属性了
        Star.prototype = {
            // 如果我们修改了原来的原型对象,给原型对象赋值的是一个对象,则必须手动的利用constructor指回原来的构造函数
            constructor: Star,
            sing: function() {
                console.log('我会唱歌');
            },
            movie: function() {
                console.log('我会演电影');
            }
        }
        var ldh = new Star('刘德华', 18);
        var zxy = new Star('张学友', 19);
        ldh.sing();
        // console.log(Star.prototype);
        // console.log(ldh.__proto__);
        console.log(Star.prototype.constructor);
        console.log(ldh.__proto__.constructor);
    </script>

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

（1）每一个构造函数里面都有一个原型对象，是通过构造函数Star.prototype指向这个原型对象的
（2）原型对象里面有一个属性constructor，它又指回了构造函数
在这里插入图片描述
（3）构造函数可以创建一个实例对象，只要new了构造函数就会产生一个实例对象
（4）实例里面也有一个对象原型__proto__，它指向原型对象。所以__proto__和prototype完全一样
（5）对象实例里也有一个constructor，它也可以指回构造函数
在这里插入图片描述
（6）实际上ldh.__proto__指向的就是原型对象，原型对象里的constructor可以指回构造函数

原型链

Star.prototype和ldh一样也是一个对象，只要是对象那么就有对象原型__proto__的存在；只要是对象原型那么它们指向的都是原型对象

<script>
    function Star(uname, age) {
        this.uname = uname;
        this.age = age;
    }
    Star.prototype.sing = function() {
        console.log('我会唱歌');
    }
    var ldh = new Star('刘德华', 18);
    // 1. 只要是对象就有__proto__ 原型, 指向原型对象
    console.log(Star.prototype);//打印该对象，发现存在__proto__，__proto__里面的constructor指向的是Objcet.prototype
    console.log(Star.prototype.__proto__ === Object.prototype);//true
</script>

在这里插入图片描述
Object.prototype是由Object创建出来的，同理在Object.prototype一定有一个constructor指回Object。
Object.prototype也是一个原型对象，那么他也有__proto__,那么Object.prototype.__proto__的内容是什么呢？答：null

<script>
    function Star(uname, age) {
        this.uname = uname;
        this.age = age;
    }
    Star.prototype.sing = function() {
        console.log('我会唱歌');
    }
    var ldh = new Star('刘德华', 18);
    // 1. 只要是对象就有__proto__ 原型, 指向原型对象
    console.log(Star.prototype);//打印该对象，发现存在__proto__，__proto__里面的constructor指向的是Objcet.prototype
    console.log(Star.prototype.__proto__ === Object.prototype);
    // 2.我们Star原型对象里面的__proto__原型指向的是 Object.prototype
    console.log(Object.prototype.__proto__);//null
    // 3. 我们Object.prototype原型对象里面的__proto__原型  指向为 null
</script>

在这里插入图片描述
原型链就像一个链路一样，让我们在查找对象成员的时候一层一层地往上查找，如果最终还是没有找到，那么就返回null。
先看对象实例上有没有待查找的成员，如果无，那么就去Star的原型对象上查看是否有该成员，如果无，再去Object上的原型对象上查看是否有这个成员，如果还没有就返回null。(每一级的原型对象prototype里存放的是该机的constructor、__proto__以及公共方法eg:sing)
在这里插入图片描述

JS中的成员查找机制

当访问一个对象的属性(包括方法)时，首先查找这个对象自身有没有该属性。
如果没有就查找它的原型（也就是__proto__指向的prototype原型对象)
如果还没有就查找原型对象的原型( Object的原型对象)。
依此类推一直找到Object为止( null )。
__proto__对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线。

<script>
    function Star(uname, age) {
        this.uname = uname;
        this.age = age;
    }
    Star.prototype.sing = function() {
        console.log('我会唱歌');
    }
    // Star.prototype.sex = '女';
    // Object.prototype.sex = '男';
    var ldh = new Star('刘德华', 18);
    // ldh.sex = '男';
    console.log(ldh.sex);// 上述3行注释，消除任意一行注释，都可以使这里正常输出
    console.log(ldh.toString()); // toString()方法是Object才有的，这里根据链式查找，也是可以使用这个方法的
</script>

原型对象中的this指向问题

<script>
    function Star(uname, age) {
        this.uname = uname;
        this.age = age;
    }
    var that;
    Star.prototype.sing = function() {
        console.log('我会唱歌');
        that = this;
    }
    var ldh = new Star('刘德华', 18);
    // 1. 在构造函数中,里面this指向的是对象实例 ldh
    ldh.sing();
    // 2.原型对象的函数里面的this 指向的是 实例对象 ldh（函数指向它的调用者）
    console.log(that === ldh);//true
</script>

扩展内置对象

可以通过原型对象，对原来的内置对象进行扩展自定义的方法。
比如给数组增加自定义求偶数和的功能。

对于数组本身就有很多内置的方法：反转数组，排序数组等。

<script>
    console.log(Array.prototype);// 通过打印原型对象可以查看数组所有的内置方法
</script>

现在考虑为数组这些内置方法中再追加求和的方法

<script>
    // 原型对象的应用 扩展内置对象方法
    Array.prototype.sum = function() {
        var sum = 0;
        for (var i = 0; i < this.length; i++) {
            sum += this[i];
        }
        return sum;
    };
    // 以下是错误写法，如果这样写就会把原来数组里面的所有方法全部覆盖
        // Array.prototype = {
        //     sum: function() {
        //         var sum = 0;
        //         for (var i = 0; i < this.length; i++) {
        //             sum += this[i];
        //         }
        //         return sum;
        //     }
        // }
    var arr = [1, 2, 3]; // arr是通过Array的构造函数创建出来的，这就是一个实例化的对象(像之前的ldh)
    console.log(arr.sum()); // 6
    console.log(Array.prototype);// 再次打印原型对象可以查看数组所有的内置方法
    // 声明数组的另一个方法
    var arr1 = new Array(11, 22, 33);
    console.log(arr1.sum());// 66
</script>

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

继承

ES6之前并没有给我们提供extends继承。
可以通过构造函数+原型对象模拟实现继承，被称为组合继承

call()方法

可以调用某个函数
可以修改函数运行时的this指向（注意是修改此次运行时的this指向，而不是永久的this指向）

fun.call (thisArg, arg1, arg2, ...)

thisArg：当前调用函数this的指向对象
arg1 , arg2∶传递的其他参数

<script>
    // call 方法
    function fn(x, y) {
        console.log(this); //修改之前this指向的是window,修改之后this指向的是o这个对象
        console.log(x + y); //3
    }
    var o = {
        name: 'andy'
    };
    // fn();传统的函数调用方法
    // 1. call() 可以调用函数
    fn.call(); //Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}
    // 2. call() 可以改变这个函数的this指向 此时这个函数的this 就指向了o这个对象
    fn.call(o, 1, 2); //{name: "andy"}
</script>

利用构造函数继承父类的属性

ES6之前是利用构造函数继承父类的属性；利用原型对象继承父类的方法。
利用构造函数继承父类的属性的核心方法是：通过call把父类型的this指向子类型的this，这样就可以实现子类型继承父类型的属性。

<script>
    // 借用父构造函数继承属性
    // 1. 父构造函数
    function Father(uname,age){
        // 这里的this原本指向父构造函数的实例对象
        this.uname = uname;
        this.age = age;
    }
    // 2. 子构造函数
    function Son(uname, age){
        // 这里的this指向子构造函数的对象实例
    }
</script>

现在上述两个构造函数没有任何关系，那么子构造函数如何才可以使用父构造函数的两个属性呢？
思路：将父构造函数中的this指向改成子构造函数的实例对象。

<script>
    // 借用父构造函数继承属性
    // 1. 父构造函数
    function Father(uname, age) {
        // this 指向父构造函数的对象实例father
        console.log(this);
        this.uname = uname;
        this.age = age;
    }
    // 2 .子构造函数 
    function Son(uname, age, score) {
        // this 指向子构造函数的对象实例
        Father.call(this, uname, age); // 在调用父类构造方法的同时，将父类的this指向改为son
        console.log(this);
		this.uname = uname;
		this.age = age;
        this.score = score; // 这是子构造函数独有的属性
    }
    var son = new Son('刘德华', 18, 100); // Son {uname: "刘德华", age: 18, score: 100}
    console.log(son); // Son {uname: "刘德华", age: 18, score: 100}
    var farther = new Father('张学友', 20); // 父构造函数的this指向还是指向父构造函数的实例对象 Father {uname: "张学友", age: 20}
</script>

在子构造函数中写上Father.call(this, uname, age);这行代码就相当于将父构造函数的代码

借用原型对象继承父类型方法

之前提到：共有的属性写在构造函数里面，共有的方法写在原型对象里
(1)在父亲的原型对象中添加一个公共方法money()

<script>
    // 借用父构造函数继承属性
    // 1. 父构造函数
    function Father(uname, age) {
        this.uname = uname;
        this.age = age;
    }
    // 父构造函数的方法
    Father.prototype.money = function() {
        console.log(1000000);
    }
    // 2 .子构造函数 
    function Son(uname, age, score) {
        Father.call(this, uname, age);
        this.score = score;
    }
    var son = new Son('刘德华', 18, 100);
    console.log(son);
    // 通过打印儿子可以看出，儿子没有继承父类的money(),儿子只是调用了父亲的构造函数，没有调用父亲的原型对象，所以儿子找不到父亲的money()
</script>

(2)若将父构造函数的原型对象赋值给子构造函数的原型对象，如下：

<script>
    // 借用父构造函数继承属性
    // 1. 父构造函数
    function Father(uname, age) {
        this.uname = uname;
        this.age = age;
    }
    //父构造函数的方法
    Father.prototype.money = function() {
        console.log(1000000);
    }
    // 2 .子构造函数 
    function Son(uname, age, score) {
        Father.call(this, uname, age);
        this.score = score;
    }
    // 若将父构造函数的原型对象赋值给子构造函数的原型对象，如下
    Son.prototype = Father.prototype;
    var son = new Son('刘德华', 18, 100);
    console.log(son);
    // 打印儿子，可以发现在儿子的对象原型的指向中(指向Son构造函数的对象原型)果然出现了money方法
</script>

（3）再追加子构造函数专门的方法

<script>
    // 借用父构造函数继承属性
    // 1. 父构造函数
    function Father(uname, age) {
        this.uname = uname;
        this.age = age;
    }
    // 父构造函数的方法
    Father.prototype.money = function() {
        console.log(1000000);
    }
    // 2 .子构造函数 
    function Son(uname, age, score) {
        Father.call(this, uname, age);
        this.score = score;
    }
    // 若将父构造函数的原型对象赋值给子构造函数的原型对象，如下
    Son.prototype = Father.prototype;
    // 子构造函数专门的方法
    Son.prototype.exam = function() {
        console.log("考试");
    }
    var son = new Son('刘德华', 18, 100);
    console.log(son);
    //此时再打印一下父构造函数的原型对象
    console.log(Father.prototype);
    // 此时出现问题：子构造函数的原型对象有从父构造函数中继承过来的money()也有自己独有的exam(),但是父构造函数的原型对象中也有子构造函数原型对象独有的方法exam()
</script>

出错原因：Son.prototype = Father.prototype;相当于将父原型对象的地址给子原型对象，即让子原型对象指向父原型对象。此时若修改子原型对象，那么父原型对象回一起被修改。那么正确的继承方法是什么呢？

<script>
    // 借用父构造函数继承属性
    // 1. 父构造函数
    function Father(uname, age) {
        // this 指向父构造函数的对象实例father

        this.uname = uname;
        this.age = age;
    }
    //父构造函数的方法
    Father.prototype.money = function() {
        console.log(1000000);
    }


    // 2 .子构造函数 
    function Son(uname, age, score) {
        // this 指向子构造函数的对象实例
        Father.call(this, uname, age); //在调用父类构造方法的同时，将父类的this指向改为son
        this.score = score; //这是子构造函数独有的属性
    }
    
    //正确的继承方法
    Son.prototype = new Father(); 
 
    //子构造函数专门的方法
    Son.prototype.exam = function() {
        console.log("考试");
    }

    var son = new Son('刘德华', 18, 100);
    console.log(son); 
    console.log(Father.prototype); // 父亲的原型对象中没有多添加子类的exam（）
    // console.log(Son.prototype.constructor);的时候，发现Son.prototype中的constructor指回的是父亲的构造函数
</script>

在这里插入图片描述

说明：Son.prototype = new Father();

父构造函数创建了一个实例对象，同时将其地址赋值给Son的原型对象，即让Son的原型对象指向这个Father的实例对象
而Father的实例对象可以通过自己的对象原型__proto__访问Father的原型对象prototype(链式查找)
而Father的原型对象prototype中存放着money这个方法

原因：Son.prototype = new Father();等同于Son.prototype={}说明Son.prototype中的方法完全被覆盖了，Son就没有自己原先的constructor，修改办法：Son.prototype.constructor = Son;如下

<script>
    // 借用父构造函数继承属性
    // 1. 父构造函数
    function Father(uname, age) {
        // this 指向父构造函数的对象实例father

        this.uname = uname;
        this.age = age;
    }
    // 父构造函数的方法
    Father.prototype.money = function() {
        console.log(1000000);
    }
    // 2 .子构造函数 
    function Son(uname, age, score) {
        // this 指向子构造函数的对象实例
        Father.call(this, uname, age); //在调用父类构造方法的同时，将父类的this指向改为son
        this.score = score; //这是子构造函数独有的属性
    }

    Son.prototype = new Father(); 

    // 修改办法：如果利用对象的形式修改了原型对象，别忘了用constructor指回原来的构造函数
    Son.prototype.constructor = Son;

    // 子构造函数专门的方法
    Son.prototype.exam = function() {
        console.log("考试");
    }
    var son = new Son('刘德华', 18, 100);
    console.log(son); //Son {uname: "刘德华", age: 18, score: 100}
    console.log(Father.prototype);
    console.log(Son.prototype.constructor); //！！！指向了父构造函数
</script>

ES5新增方法

数组方法
字符串方法
对象方法

数组方法

迭代(遍历)方法: forEach()、map()、filter()、some()、every() ;

forEach()方法

array.forEach ( function (currentvalue,index,arr))

currentValue：数组当前项的值
index：数组当前项的索引
arr：数组对象本身

<script>
    // forEach 迭代(遍历)数组
    var arr = [1, 2, 3];
    var sum = 0;
    arr.forEach(function(value, index, array) {
        console.log("每个数组的元素" + value);
        console.log("每个数组的索引号" + index);
        console.log("数组本身" + array);
        // 求和
        sum += value;
    })
</script>

filter()方法

filter()方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素,主要用于筛选数组

array.filter (function (currentvalue,index,arr))

注意它直接返回一个新数组
currentValue：数组当前项的值
index：数组当前项的索引
arr：数组对象本身

<script>
    // filter筛选数组
    var arr = [12, 66, 4, 88，3,7];
    var newArr = arr.filter(function(value, index) {
        // 返回数组中值大于20的元素
        // return value >= 20;
        // 筛选所有的偶数
        return value % 2 === 0
    });
    console.log(newArr); // [66, 88] //  [12, 66, 4, 88]
</script>

some()方法

some()方法用于检测数组中的元素是否满足指定条件。通俗点查找数组中是否有满足条件的元素
注意它返回值是布尔值如果查找到这个元素，就返回true，如果查找不到就返回false。
如果找到第一个满足条件的元素，则终止循环不在继续查找。

array.some (function (currentvalue,index,arr))

currentValue：数组当前项的值
index：数组当前项的索引
arr：数组对象本身

例子

<script>
    // some 查找数组中是否有满足条件的元素
    var arr = [10, 30, 4];
    var flag = arr.some(function(value) {
        return value >= 20;
    });
    console.log(flag); // true 数组中有大于20的元素，所以返回true

	var arr1 = ['red', 'pink', 'blue'];
    var flag1 = arr1.some(function(value) {
        return value == 'pink';  // 检查数组中是否有'pink'元素
    });
    console.log(flag1);// true
</script>

filter 也是查找满足条件的元素，返回的是一个数组，而且是把所有满足条件的元素返回回来
some也是查找满足条件的元素是否存在，返回的是一个布尔值，如果查找到第一个满足条件的元素就终止循环；value/index/array用到哪个参数就写哪个参数，用不到就省略不写

forEach和some的区别

<script>
    var arr = ['red', 'green', 'blue', 'pink'];
    // 1. forEach
    arr.forEach(function(value, index) {
        if (value == 'green') {
            console.log('找到了该元素');
            return true; // 在forEach里面return不会终止迭代,仅仅终止了本轮循环
        }
        console.log(index);
    })
    
    // 2.some
    // 如果查询数组中唯一的元素，用some合适
    arr.some(function(value, index) {
        if (value == 'green') {
            console.log('找到了该元素');
            return true; // 在some里面return true终止迭代
        }
        console.log(index);
    })
    // 3.filter
    arr.filter(function(value, index) {
        if (value == 'green') {
            console.log('找到了该元素');
            return true; // 在filter里面return true不终止迭代，和forEach一样
        }
        console.log(index);
    })
</script>

字符串方法

trim()方法会从一个字符串的两端删除空白字符。

str.trim ()

trim()方法并不影响原字符串本身，它返回的是一个新的字符串

<script>
    //trim方法去除字符串两倍空格  不去除中间空格
    var str = '  an  dy  ';
    console.log(str); //  an  dy  
    var str1 = str.trim();
    console.log(str1);//an  dy
</script>

<body>
    <input type="text"><button>点击</button>
    <div></div>
    <script>
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        var div = document.querySelector('div');
        //在input中输入：空格空格andy空格空格
        btn.onclick = function() {
        	// 改进
        	var str = input.value.trim();
            // if (input.value.trim() === '') {
            if (str === '') {
                alert('内容不能为空');
            } else {
                console.log(input.value); //空格空格andy空格空格
                console.log(input.value.length); //8
                div.innerHTML = input.value;
            }
        }
    </script>
</body>

对象方法

Object.keys()方法

Object.keys()用于获取对象自身所有的属性

object.keys(obj)

效果类似for…in
返回一个由属性名组成的数组

<script>
    // 用于获取对象自身所有的属性名（得不到属性值）
    var obj = {
        id: 1,
        pname: '小米',
        price: 1999,
        num: 2000
    };
    // 返回的是一个数组
    var arr = Object.keys(obj);
    console.log(arr);
    // 后面需要使用属性名的时候将数组拿出来遍历就可以了
    arr.forEach(function(value) {
        console.log(value);
    })
</script>

Object.defineProperty()方法

Object.defineProperty()定义对象中新属性或修改原有的属性。

object.defineProperty(obj, prop,descriptor)

obj ：必需。目标对象
prop ：必需。需定义或修改的属性的名字
descriptor ：必需。目标属性所拥有的特性

以下是对第3个参数descriptor的说明，以对象{}的形式书写（以下的默认值都是在使用Object.defineProperty方法定义的属性时的默认值）

value：设置属性的值，默认undefined；
writable：属性值是否可以重写，true|false，默认false，其中true可以修改属性值；
enumerable：目标属性是否可以被枚举遍历，true|false；默认false，false不允许遍历；
configurable：目标属性是否可以被删除或是否可以再次修改特性，true|false；默认false，表示该属性不可以删除，而且不可以再次修改descriptor里面所有参数

<script>
    // Object.defineProperty() 定义新属性或修改原有的属性
    var obj = {
        id: 1,
        pname: '小米',
        price: 1999
    };
    // 1. 以前的对象添加和修改属性的方式
    // obj.num = 1000;
    // obj.price = 99;
    // console.log(obj);
    // 2. Object.defineProperty() 定义新属性或修改原有的属性
    //（2）
    Object.defineProperty(obj, 'num', {
        value: 1000
    });
    console.log(obj); // {id: 1, pname: "小米", price: 1999, num: 1000}

    //（3）
    Object.defineProperty(obj, 'price', {
        value: 9.9
    });
    console.log(obj); // {id: 1, pname: "小米", price: 9.9, num: 1000}

    //（4）
    Object.defineProperty(obj, 'id', {
        writable: false,
    });
    obj.id = 2;// id无法被修改
    console.log(obj); // {id: 1, pname: "小米", price: 9.9, num: 1000}

    //（5）
    Object.defineProperty(obj, 'address', {
        value: '中国',  
        enumerable: false
    });

    console.log(obj); // { id: 1, pname: "小米", price: 9.9, num: 1000, address: "中国"}
    console.log(Object.keys(obj)); // ["id", "pname", "price"]   num和address都遍历不出来

    //（6）
    Object.defineProperty(obj, 'address', {
        value: '中国',  
        configurable: false
    });
    delete obj.address;
    console.log(obj); // {id: 1, pname: "小米", price: 9.9, num: 1000, address: "中国"} 无法删除address
    delete obj.pname;
    console.log(obj); // {id: 1, price: 9.9, num: 1000, address: "中国"}  可以删除pname，因为pname不是通过Object.defineProperty这个方法添加的属性

    //（7）
    Object.defineProperty(obj, 'address', {
        value: '中国',
        enumerable: true,
        configurable: true
    });
    console.log(obj.address); 
    // 会报错 因为在（6）中configurable: false；所以该属性的value、writable、enumerable、configurable都不可以在修改
</script>