JavaScript 对象及初识面向对象

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>运行结果：

补充一点：

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