9、JavaScript对象及初识面向对象

目录

1、回顾JavaScript数据类型

2、对象是什么

3、什么是面向对象

4、构造函数和原型对象

---

1、回顾JavaScript数据类型

回顾JavaScript数据类型

JavaScript中的基本数据类型

number(数值类型)

string(字符串类型)

boolean(布尔类型)

null(空类型)

undefined(未定义类型)

object

2、对象是什么

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

属性

方法

什么是面向对象

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

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

3、什么是面向对象

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

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

自定义对象2-1

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

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

自定义对象2-2

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

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

内置对象2-1

常见的内置对象

String（字符串）对象

Date（日期）对象

Array（数组）对象

Boolean（逻辑）对象

Math（算数）对象

RegExp对象

内置对象2-2

String（字符串）对象

length属性

indexOf( )方法、replace( )方法

Date（日期）对象

get×××：获取年、月、日、时、分、秒等等

set×××：设置年、月、日、时、分、秒等等

Math（算数）对象

round( )、max( )、min( )方法

……

Array（数组）对象

length属性

sort( )、concat( )、join( )方法

Boolean（逻辑）对象

true或者false

toString( )方法

RegExp对象

RegExp是正则表达式的缩写

4、构造函数和原型对象

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

构造函数

原型对象

构造函数

 

创建构造函数

构造函数始终都应该以一个大写字母开头

 

使用构造函数创建对象

 

调用构函数的4个步骤

创建一个新对象

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

执行构造函数中的代码

返回新对象

constructor属性

constructor属性指向Flower

alert(flower1.constructor==Flower);
​
alert(flower2.constructor==Flower);
​
alert(flower3.constructor==Flower);

 

constructor属性最初是用来标识对象类型的，但是提到检测对象类型，还是instanceof操作符要更可靠一些

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);

原型对象2-1

原型是Javascript中的继承的基础，JavaScript的继承就是基于原型的继承。

在JavaScript中，我们创建一个函数A(就是声明一个函数), 那么浏览器就会在内存中创建一个对象B，而且每个函数都默认会有一个属性 prototype 指向了这个对象( 即：prototype的属性的值是这个对象 )。这个对象B就是函数A的原型对象，简称函数的原型。这个原型对象B 默认会有一个属性 constructor 指向了这个函数A ( 意思就是说：constructor属性的值是函数A )。

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);
​

继承

原型链4-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
​

原型链4-3

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

 

 

原型链4-4

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

搜索实例

搜索Man.prototype

搜索Humans.prototype

完整的原型链

 

 

对象继承

 

借用构造函数2-1

apply([thisOjb[,argArray]])
应用某一对象的一个方法，用另一个对象替换当前对象
​
call([thisObj[,arg1[,arg2[,  [,argN]]]]])
调用一个对象的一个方法，以另一个对象替换当前对象
​

借用构造函数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
​

组合继承

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

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

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

constructor 他的构造函数

prototype 他的原型指向的是谁

JavaScript的每个对象都继承另一个对象，后者称为“原型”（prototype）对象。只有null除外，它没有自己的原型对象。

原型对象上的所有属性和方法，都能被派生对象共享。这就是JavaScript继承机制的基本设计。

通过构造函数生成实例对象时，会自动为实例对象分配原型对象。每一个构造函数都有一个prototype属性，这个属性就是实例对象的原型对象。