javascript面向对象（js高级）

//以下代码是对对象的复习
//字面量创建对象
var ldh = {
    name: '刘德华',
    age: 18
}
console.log(ldh);
//构造函数创建对象
  function Star(name, age) {
    this.name = name;
    this.age = age;
 }
var ldh = new Star('刘德华', 18)//实例化对象
console.log(ldh);

2.2类class

在 ES6 中新增加了类的概念，可以使用 class 关键字声明一个类，之后以这个类来实例化对象。

类抽象了对象的公共部分，它泛指某一大类（class），对象特指某一个，通过类实列化一个具体的对象。

2.3创建类--（重点看）

语法：

class name {
......
}

创建实例：

注意：类必须使用new实列化

var xx=new name（）

2.4constructor构造函数

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

代码展示：---语法：

  // 1. 创建类 class  创建一个 明星类
        class Star {
            constructor(uname, age) {  // constructor 构造方法或者构造函数
                this.uname = uname;
                this.age = age;
            }
        }

创建实列：

    // 2. 利用类创建对象 new
        var ldh = new Star('刘德华', 18);
        var zxy = new Star('张学友', 20);
        console.log(ldh);
        console.log(zxy);

注意点：

//(1) 通过class 关键字创建类, 类名我们还是习惯性定义首字母大写

//(2) 类里面有个constructor 函数,可以接受传递过来的参数,同时返回实例对象

//(3) constructor 函数只要 new 生成实例时,就会自动调用这个函数, 如果我们不写这个函数,类也会自动生成这个函数

//(4) 生成实例 new 不能省略

//(5) 最后注意语法规范, 创建类类名后面不要加小括号,生成实例类名后面加小括号, 构造函数不需要加function

2.5 类添加方法

代码展示：---语法：

3.类的继承（面试题！）

现实中的继承：子承父业，比如我们都继承了父亲的姓。
程序中的继承：子类可以继承父类的一些属性和方法。

语法：

class Father{ // 父类
}
class Son extends Father { // 子类继承父类
}

extends:表示继承的意思！！！

代码展示：

继承方法一：

继承方法二：

 // 父类有加法方法
 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 调用父类的构造函数 super 必须在子类this之前调用,放到
this之后会报错
   super(x, y);
   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

以上代码执行结果：

注意 :
1. 继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行
子类的
2. 继承中,如果子类里面没有,就去查找父类有没有这个方法,如果有,就执行父类的这
个方法(就近原则)
3. 如果子类想要继承父类的方法,同时在自己内部扩展自己的方法,利用super 调用
父类的构造函数,super 必须在子类this之前调用

4 . 时刻注意this的指向问题,类里面的共有的属性和方法一定要加this使用.
1）. constructor中的this指向的是new出来的实例对象
2）. 自定义的方法,一般也指向的new出来的实例对象
3）. 绑定事件之后this指向的就是触发事件的事件源
5. 在 ES6 中类没有变量提升，所以必须先定义类，才能通过类实例化对象

代码报错整理：

案例练习：（tab栏切换--未整理。。。）

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

构造函数和原型

1.1概述

在 ES6之前，对象不是基于类创建的，而是用一种称为构建函数的特殊函数来定义对象和它们的特征。

创建对象可以通过以下三种方式：--知识点回顾

1. 对象字面量

 var obj2 = {};

2. new Object()

var obj1 = new Object();

补充：对方式1及方式2进行传入数据：

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);
        ldh.sing();
        zxy.sing();

1.2构造函数

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

在 JS 中，使用构造函数时要注意以下两点：
1. 构造函数用于创建某一类对象，其首字母要大写
2. 构造函数要和 new 一起使用才有意义

new 在执行时会做四件事情：（面试）

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

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 就是实例成员
        // 实例成员只能通过实例化的对象来访问
        console.log(ldh.uname);
        ldh.sing();
        // console.log(Star.uname); // 不可以通过构造函数来访问实例成员
        // 2. 静态成员 在构造函数本身上添加的成员  sex 就是静态成员
        Star.sex = '男';
        // 静态成员只能通过构造函数来访问
        console.log(Star.sex);
        console.log(ldh.sex); // 不能通过对象来访问
    </script>

1.3 构造函数的问题

构造函数方法很好用，但是存在浪费内存的问题。

我们希望所有的对象使用同一个函数，这样就比较节省内存，那么我们要怎样做呢？

1.4 构造函数原型 prototype

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

问答？
1. 原型是什么？
一个对象，我们也称为 prototype 为原型对象。
2. 原型的作用是什么？
共享方法。

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

            // }
        }
        // 原型：
        Star.prototype.sing = function() {
            console.log('我会唱歌');
        }
        var ldh = new Star('刘德华', 18);
        var zxy = new Star('张学友', 19);
        console.log(ldh.sing === zxy.sing);
        // console.dir(Star);
        ldh.sing();
        zxy.sing();
        // 2. 一般情况下,我们的公共属性定义到构造函数里面, 公共的方法我们放到原型对象身上
    </script>

1.5 对象原型 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);//Star.prototype也是指向原型对象 prototype
        // 方法的查找规则: 首先先看ldh 对象身上是否有 sing 方法,如果有就执行这个对象上的sing
        // 如果么有sing 这个方法,因为有__proto__ 的存在,就去构造函数原型对象prototype身上去查找sing这个方法
    </script>

1.6 constructor 构造函数

对象原型（ __proto__）和构造函数（prototype）原型对象里面都有一个属性 constructor 属性，constructor 我们称
为构造函数，因为它指回构造函数本身。
constructor 主要用于记录该对象引用于哪个构造函数，它可以让原型对象重新指向原来的构造函数。
一般情况下，对象的方法都在构造函数的原型对象中设置。如果有多个对象的方法，我们可以给原型对象采取对象形式赋
值，但是这样就会覆盖构造函数原型对象原来的内容，这样修改后的原型对象 constructor 就不再指向当前构造函数了。
此时，我们可以在修改后的原型对象中，添加一个 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 = {
            // 如果我们修改了原来的原型对象,给原型对象赋值的是一个对象,则必须手动的利用constructor指回原来的构造函数
            constructor: Star,
            sing: function() {
                console.log('我会唱歌');
            },
            movie: function() {
                console.log('我会演电影');
            }
        }
        var ldh = new Star('刘德华', 18);
        var zxy = new Star('张学友', 19);
        console.log(Star.prototype);
        console.log(ldh.__proto__);
        console.log(Star.prototype.constructor);
        console.log(ldh.__proto__.constructor);
    </script>

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

1.8 原型链

<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);
        console.log(Star.prototype.__proto__ === Object.prototype);
        // 2.我们Star原型对象里面的__proto__原型指向的是 Object.prototype
        console.log(Object.prototype.__proto__);
        // 3. 我们Object.prototype原型对象里面的__proto__原型  指向为 null
    </script>

1.9 JavaScript 的成员查找机制(规则)

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

1.10 原型对象this指向（面试）

构造函数中的this 指向我们实例对象.
原型对象里面放的是方法, 这个方法里面的this 指向的是这个方法的调用者, 也就是这个实例对象.

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
console.log(that === ldh);//true
// 2.原型对象函数里面的this 指向的是 实例对象 ldh

1.11 扩展内置对象（待整理代码。。。）

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

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

代码展示：

 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];
        console.log(arr.sum());
        console.log(Array.prototype);
        var arr1 = new Array(11, 22, 33);
        console.log(arr1.sum());

继承-面试（可能涉及手写）

1.子构造函数继承父构造函数中的属性

1. 先定义一个父构造函数
2. 再定义一个子构造函数
3. 子构造函数继承父构造函数的属性(使用call方法)

代码展示：

 // 1父元素的属性构造函数
        function Father(name, age) {
               // this 指向父构造函数的对象实例
            this.name = name
            this.age = age

        }
        // 2.子元素的属性构造函数
        function Son(name, age, height, widtch) {
            // 2.1想继承父元素的属性--那就先改变this的指向
            Father.call(this, name, age) //注：这里是改变父元素的this为子元素，及传递父元素的形参
               // this 指向子构造函数的对象实例
            this.height = height
            this.widtch = widtch
        }

        // 3.创建子元素的实列化
        var son= new Son("橘子", '18', '160', 90)
        console.log(son)

2. 借用原型对象继承方法

1. 先定义一个父构造函数
2. 再定义一个子构造函数
3. 子构造函数继承父构造函数的属性(使用call方法)

错题分析：因为对象是复杂的数据类型--所以会把地址传给父元素。

// 错题分析：因为对象是复杂的数据类型--所以会把地址传给父元素。Son.prototype = Father.prototype;

// Son.prototype = Father.prototype; //这样直接赋值会有问题,如果修改了子原型对象,父原型对象也会跟着一起变化

解决：把父构造函数的实例化赋值于子构造函数的原型对象

Son.prototype = new Father();//此时的Son的this是父元素的实列
        // 如果利用对象的形式修改了原型对象,别忘了利用constructor 指回原来的构造函数
        Son.prototype.constructor = Son;

分析1：

分析2：

分析3：

代码展示：

       // 这个是子构造函数专门的方法--此时利用该方法，无论怎么设置子构造函数的方法都不会影响父构造函数
        Son.prototype.exam = function() {
           console.log('孩子要考试');

        }

继承方法代码展示：

// 1. 父构造函数
function Father(uname, age) {
  // this 指向父构造函数的对象实例
  this.uname = uname;
  this.age = age;
}
Father.prototype.money = function() {
  console.log(100000);
 };
 // 2 .子构造函数
  function Son(uname, age, score) {
      // this 指向子构造函数的对象实例
      Father.call(this, uname, age);
      this.score = score;
  }
// Son.prototype = Father.prototype;  这样直接赋值会有问题,如果修改了子原型对
象,父原型对象也会跟着一起变化
  Son.prototype = new Father();
  // 如果利用对象的形式修改了原型对象,别忘了利用constructor 指回原来的构造函数
  Son.prototype.constructor = Son;
  // 这个是子构造函数专门的方法
  Son.prototype.exam = function() {
    console.log('孩子要考试');
  }
  var son = new Son('刘德华', 18, 100);
  console.log(son);

以上代码结果：