大家好，我是讯享网，很高兴认识大家。

1. 本章任务
   1. 创建person对象
   2. 创建Person构造函数
   3. 创建Person对象并画原型链图
   4. 创建继承Person的Student子类

 

1. 本章目标
   1. 了解什么是对象和面向对象
   2. 会创建对象
   3. 理解什么是构造函数和对象原型
   4. 理解什么是原型链并且使用对象继承，会画原型链图

 

1. 回顾JavaScript数据类型

JavaScript中的基本数据类型

• • • number(数值类型)
    • string(字符串类型)
    • boolean(布尔类型)
    • null(空类型)
    • undefined(未定义类型)
    • object

 

1. 对象是什么?
   1. 对象是包含相关属性和方法的集合体
      • 属性
      • 方法
   2. 什么是面向对象
      • 面向对象仅仅是一个概念或者编程思想
      • 通过一种叫做原型的方式来实现面向对象编程

1. 创建对象
   1. 自定义对象
   2. 内置对象

 

1. 自定义对象2-1

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

语法：

var 对象名称=new Object( );

示例：----------通过  . 添加属性和方法

var flower=new Object();     flower.name="长春花";     flower.genera="夹竹桃科 长春花属";     flower.area="非洲、亚热带、热带以及中国大陆的华东、西南、中南等地";     flower.uses="观赏或用药等";     flower.showName=function(){    alert(this.name);    }  flower.showName();

讯享网

 

1. 自定义对象2-2

使用字面量赋值方式创建对象

示例：

讯享网var flower={         name:"长春花",         genera:"夹竹桃科 长春花属",         area:"非洲、亚热带、热带以及中国大陆的华东、西南、中南等地",         uses:"观赏或用药等",         showName:function(){ alert(this.name); }     }  flower.showName();

 

1. 内置对象2-1

常见的内置对象：

String（字符串）对象

Date（日期）对象

Array（数组）对象

Boolean（逻辑）对象

Math（算数）对象

RegExp对象

1. 学员操作—创建person对象2-2

练习：

实现思路

使用new创建对象person

    var person=new Object();

使用“.”添加属性

   person.name="朗晓明";

    person.age="38";

使用+把各属性的值拼接起来，使用innerHTML为页面元素赋值

   var str="姓名："+this.name+"<br/>年龄："+this.age+"……;

简写：var str=this.name+this.age+……;

   document.getElementById("intro").innerHTML=str;

 

1. 构造函数和原型对象

如何解决使用同一个接口不需要创建很多对象，减少产生大量的重复代码？

构造函数

原型对象

 

1. 构造函数

1. 创建构造函数

示例：

function Flower(name,genera,area,uses){         this.name=name;        …….         this.showName=function(){             alert(this.name);         }     }

    var flower1=new Flower("长春花","夹竹桃科 长春花属","非洲、亚热带、热带以及中国大陆的华东、西南、中南等地","观赏或用药等")

   flower1.showName();

 

1. 使用构造函数创建对象

示例：

var flower2=new Flower("牡丹","芍药科 芍药属","中国","观赏、食用或药用");

flower2.showName();

var flower3=new Flower("曼陀罗花","茄科 曼陀罗属","印度、中国北部","观赏或药用");

flower3.showName();

1. 使用构造函数创建新实例

调用构函数的4个步骤：

创建一个新对象

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

执行构造函数中的代码

返回新对象

 

1. constructor属性

constructor属性指向Flower

示例：

讯享网alert (flower1.constructor==Flower); alert (flower2.constructor==Flower); alert (flower3.constructor==Flower);

1. instanceof操作符

使用instanceof操作符检测对象类型

alert(flower1 instanceof Object); alert(flower1 instanceof Flower); alert(flower2 instanceof Object); alert(flower2 instanceof Flower); alert(flower3 instanceof Object); alert(flower3 instanceof Flower);

 

1. 原型对象2-1

示例：

function Flower(){     }     Flower.prototype.name="曼陀罗花";     Flower.prototype.genera="茄科 曼陀罗属";     Flower.prototype.area="印度、中国北部";     Flower.prototype.uses="观赏或药用";     Flower.prototype.showName=function() {         alert(this.name);     }     var flower1=new Flower();     flower1.showName();     var flower2=new Flower();     flower2.showName();     alert(flower1.showName==flower2.showName);

 

1. 原型对象2-2

示例：

function Flower(){     }     Flower.prototype.name="曼陀罗花";     Flower.prototype.genera="茄科 曼陀罗属";     Flower.prototype.area="印度、中国北部";     Flower.prototype.uses="观赏或药用";     Flower.prototype.showName=function() {         alert(this.name);     }     var flower1=new Flower();     var flower2=new Flower();     flower1.name="长春花";     alert(flower1.name);     alert(flower2.name);

 

1. 继承
   1. 原型链
   2. 对象继承

 

1. 原型链4-1
   1. 一个原型对象是另一个原型对象的实例
   2. 相关的原型对象层层递进，就构成了实例与原型的链条，就是原型链

1. 原型链4-2

示例：

function Humans(){         this.foot=2;     }     Humans.prototype.getFoot=function(){        return this.foot;     }     function Man(){         this.head=1;     }     Man.prototype=new Humans();          //继承了Humans     Man.prototype.getHead=function(){         return this.head;     }     var man1=new Man();     alert(man1.getFoot());                          //2     alert(man1 instanceof Object);          //true          alert(man1 instanceof Humans);        //true     alert(man1 instanceof Man);          //true

 

1. 原型链4-3

构造函数和原型之间的关系

 

1. 原型链4-4

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

搜索实例

搜索Man.prototype

搜索Humans.prototype

 

1. 完整的原型链

Object在原型链中的位置

1. 对象继承
   1. man1.clothing和man2.clothing输入的信息一样，为什么？
   2. 创建子类型的实例时，不能向父类型的构造函数中传递参数

示例：

 function Humans(){         this.clothing=["trousers","dress","jacket"];     }     function Man(){     }     //继承了Humans     Man.prototype=new Humans();     var man1=new Man();     man1.clothing.push("coat");     alert(man1.clothing);     var man2=new Man();     alert(man2.clothing);

 

1. 借用构造函数2-1

语法：

apply([thisOjb[,argArray]])

应用某一对象的一个方法，用另一个对象替换当前对象

语法：

call([thisObj[,arg1[,arg2[,  [,argN]]]]])

调用一个对象的一个方法，以另一个对象替换当前对象

 

1. 借用构造函数2-2

示例：  

function Humans(name){         this.name=name;     }     function Man(){         Humans.call(this,"mary");   //继承了Humans,同时还传递了参数         this.age=38;              //实例属性     }     var man1=new Man();     alert(man1.name);       //输出mary     alert(man1.age);        //输出38

 

1. 组合继承

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

• • • 将原型链和借用构造函数的技术组合到一块，发挥二者之长的一种继承模式
    • 使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承

 

1. 总结