1）回顾JavaScript 数据类型

2）对象是什么

1.对象是包含相关属性和方法的集合体

1-1：属性

1-2：方法

2.什么是面向对象

2-1：面向对象仅仅是一个概念或者编程思想

2-2：通过一种叫做原型的方式来实现面向对象编程

3）创建对象

1.自定义对象

基于Object 对象的方式创建对象

语法：

var 对象名称 = new Object（）；

栗子一：基于Object 对象的方式创建对象

<script>
    var flowe=new Object();
    //添加属性
    flowe.name="长春花";
    flowe.genera="长春花园";
    flowe.areas="ssabvbvhvdhv";
    flowe.uses="观赏";
    //添加方法
    flowe.showName=function()
    {
        alert(flowe.name);
    }
    flowe.showName();
</script>

栗子二：使用字面量赋值方式创建对象

    var flowe1=
    {
        name:"长春花",
        genera:"长春花园",
        areas:"ssabvbvhvdhv",
        uses:"观赏",
        showName:function()
        {
            alert(this.name);
        }
    }
    flowe1.showName();

2）内置对象

+常见的内置对象

1. String （字符串）对象

2. Date （日期）对象

3.Array （数组）对象

4.Boolean （逻辑）对象

5.Math（算数）对象

6. RegExp 对象

---String（字符串）对象

1.length 属性

2.indexOf（）方法 replace（）方法

---Date（日期）对象

var time = new Date();//获取系统时间 var hh = time.getHours();//获取系统小时 var mm = time.getMinutes();//获取系统分钟 var ss = time.getSeconds();//获取系统秒数

---Array（数组）对象

1. length属性

2.sort（）、concat（）、join（）方法

---Boolean（逻辑）对象

1.true 或者 false

2.toString（）方法

---Math（算数）对象

1.round（）、max（）、min（）方法

....................

---RegExp对象

RegExp是正则表达式的缩写

3）构造函数

小栗子：

<script>
    function Flowe(name,genera,areas,uses)
    {
        this.name=name;
        this.genera=genera;
        this.areas=areas;
        this.uses=uses;
        this.showName=function()
        {
            alert(this.name);
        };
    }
    var Flowe1=new Flowe("长春花","长春花园","ssabvbvhvdhv","观赏");
    Flowe1.showName();
    var Flowe2=new Flowe("野蛮书","长春花园","ssabvbvhvdhv","观赏");
    Flowe2.showName();
    var Flowe3=new Flowe("也漫画","长春花园","ssabvbvhvdhv","观赏");
    Flowe3.showName();
</script>

使用构造函数创建新实例：调用构造函数的4个步骤

1.创建一个新对象

2.将构造函数的作用域赋给新对象（this就指向了这个新对象）

3.执行构造函数中的代码

4.返回新对象

constructor属性检测对象类型

constructor属性指向Flower

alert（Flowe1.constructor == Flowe）；

alert（Flowe2.constructor == Flowe）；

alert（Flowe3.constructor == Flowe）；

instanceof操作符检测对象类型

alert(Flowe1 instanceof Object);
alert(Flowe1 instanceof Object);
alert(Flowe2 instanceof Object);
alert(Flowe2 instanceof Flowe);
alert(Flowe3 instanceof Flowe);
alert(Flowe3 instanceof Flowe);

栗子修改代码如下：

把方法写成全局方法：调用

<script>
    function Flowe(name,genera,areas,uses)
    {
        this.name=name;
        this.genera=genera;
        this.areas=areas;
        this.uses=uses;
        this.showName=showName;
    }
    function showName()
    {
        alert(this.name);
    }
    var Flowe1=new Flowe("长春花","长春花园","ssabvbvhvdhv","观赏");
    Flowe1.showName();
    var Flowe2=new Flowe("野蛮书","长春花园","ssabvbvhvdhv","观赏");
    Flowe2.showName();
    var Flowe3=new Flowe("也漫画","长春花园","ssabvbvhvdhv","观赏");
    Flowe3.showName();
    alert(Flowe1.showName==Flowe2.showName)//判断函数是否相等

同样也可以实现效果，但是这样的写法就没有了封装性可言不安全

那怎么解决那，那就耐心点接着往下看

3-1）原型对象

1. 每个函数都有一个prototype属性，这个属性是一个指针，指向一个对象。

2. prototype就是通过调用构造函数而创建的那个对象实例的原型对象

小栗子：

原型对象的代码小栗子：

<script>
    function Flowe()
    {
    }
    Flowe.prototype.name='长春花';
    Flowe.prototype.genera="长春花园";
    Flowe.prototype.areas="ssabvbvhvdhv";
    Flowe.prototype.uses="观赏";
    Flowe.prototype.showName=function()
    {
        alert(this.name);
    };
    var Flowe1=new Flowe();
    Flowe1.name='曼陀罗花';//注释掉  可以看到 两个对象是一样的值，这里是更改 Flowe1的值
    Flowe1.showName();
    var Flowe2=new Flowe();
    Flowe2.showName();
    alert(Flowe1.showName==Flowe2.showName);
</script>

提示：原型对象的创建解决了构造函数当中的一个减少方法实例的创建，实现了封装

原型对象的结构图：

4）JavaScript 继承

1.原型链 2.对象继承

原型链图：

1. 一个原型对象是另一个原型对象的实例

2. 相关的原型对象层层递进，就构成了实例与原型的链条，就是原型链

原型链小栗子：

原型链代码小栗子：

<script>
    function Humans()
    {
        this.foot=2;
    }
    Humans.prototype.getFoot=function()
    {//原型对象添加方法
        return this.foot;
    }
    function Man()
    {
        this.head=1;
    }
    //Man继承Humans
    Man.prototype=new Humans();
    Man.prototype.getHead=function()
    {//原型对象添加方法
        return this.head;
    }
    var man1=new Man();
    alert(man1.getFoot());//2
    alert(man1.getHead());//1
    alert(man1 instanceof Object);//true
    alert(man1 instanceof Humans);//true
    alert(man1 instanceof Man);true
</script>

调用man1.getFoot() 经历的三个步骤

1.搜索实例

2.搜索Man.prototype

2.搜索Humans.prototype

如果没有搜索到则产生下列图：完整原型链

4-2）对象继承

<script>
    function Humans()
    {
       this.clothing=["aaa","bbb","ccc"];
    }
    function Man()
    {
    }
    //Man继承Humans
    Man.prototype=new Humans();
    var man1=new Man();
    man1.clothing.push("ddd");//数组添加信息
    alert(man1.clothing);
    var man2=new Man();
    alert(man2.clothing);
</script>

打印结果为：两次都是一样的

为什么是一样的那？

创建子类型的实例时，不能向父类型的结构函数中传递参数

解决方案：使用借用构造函数

思想：

借用构造函数的基本思想。就是在子类构造函数当中调用父类构造函数。

其子类构造的内部通过 apply（）或 call（）去调用父类型的构造函数，来实现属性和方法的继承。

修改代码如下的小栗子：实现实现属性和方法的继承。进行私有化

<script>
    function Humans()
    {
       this.clothing=["aaa","bbb","ccc"];
    }
    function Man()
    {
        Humans.call(this);
    }
    //Man继承Humans
   // Man.prototype=new Humans();
    var man1=new Man();
    man1.clothing.push("ddd");//数组添加信息
    alert(man1.clothing);
    var man2=new Man();
    alert(man2.clothing);
</script>

借用构造函数的一个大的优势：

1.可以在子类型构造函数中向父类型构造函数传递参数

小实例：

代码小栗子：

<script>
    function Humans(name)
    {
      this.name=name;
    }
    Humans.prototype.showName="sss";
    function Man()
    {
        Humans.call(this,"mary");
        this.age=38;
    }
    var man1=new Man();
    alert(man1.name);
    alert(man1.age);
</script>

运行结果：

没有问题。

那么我们现在有个新的问题：如果我通过原型链给父类添加一个属性，那么又会怎么样那？

稍作修改代码如下：

<script>
    function Humans(name)
    {
      this.name=name;
    }
    //原型链方式添加属性
    Humans.prototype.showName="sss";
    function Man()
    {
        Humans.call(this,"mary");
        this.age=38;
    }
    var man1=new Man();
    alert(man1.name);
    alert(man1.age);
    alert(man1.showName);
</script>

运行结果如下：

showName，undefined 没有值。为什么会这样那？又该如何使用或者复用父类的方法或属性那那？

接着往下看一种方式

组合继承：

组合继承：有时也叫做伪经典继承

1.将原型链和借用构造函数的技术组合到一块，发挥二者之长的一种继承模式。

2.使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承

修改后的代码：

<script>
    function Humans(name)
    {
      this.name=name;
    }
    //原型链方式添加属性
    Humans.prototype.showName="sss";
    function Man()
    {
        //调用构造函数实现实例属性的继承
        Humans.call(this,"mary");
        this.age=38;
    }
    //继承Humans
    Man.prototype=new Humans();
    Man.prototype.getAge=function()
    {
        return this.age;
    }
    var man1=new Man();
    alert(man1.name);
    alert(man1.getAge());
    alert(man1.showName);
</script>

运行结果：

补充一点：

如果两个函数的名称一样，则会执行最后一个函数，覆盖之前的函数。

从上到下执行

JavaScript 对象及初识面向对象