HTML-JavaScript对象及初识面向对象

2022-05-12 08:00 144阅读 0赞

**对象是****什么**

![70][]

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

什么是面向对象

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

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

## **JavaScript中的基本数据类型：** ##

1.  number（数值类型）
2.  string（字符串类型）
3.  boolean(布尔类型)
4.  null(空类型)    【判断后的值是object】
5.  undefined(未定义类型)
6.  object(实例化的对象是一组数据或者功能的集合)

**创建对象**

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

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

**示例：**

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

**内置对象：****常见的内置****对象**

**1. String（字符串）对象**

length属性

indexOf( )方法、replace( )方法

**2. Date（日期）对象**

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

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

**3. Array（数组）对象**

length属性

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

**4. Boolean（逻辑）对象**

true或者false

toString( )方法

**5. Math（算数）对象**

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

**6. RegExp对象**

RegExp是正则表达式的缩写

**构造函数和原型对象**

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

**               1.构造函数               ****2.原型对象**

** 构造函数**

①创建特定类型的对象

②通过this变量控制属性和方法，实现属性和方法的调用

③通过new操作符来创建对应的构造函数的实例，也就是对象

**示例:**

function Flower(name,genera,area,uses){
      <构造函数始终都应该以一个大写字母开头>
            this.name=name;
           …….
            this.showName=function(){
                alert(this.name);
            }
        }
        var flower1=new Flower("长春花","夹竹桃科 长春花属","非洲、亚热带、热带以及中国大陆的华东、西南、中南等地","观赏或用药等")
       flower1.showName();

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

![70 1][]

**调用构函数的****4****个****步骤**

**1.****创建****一个新****对象**

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

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

**4.****返回****新****对象**

**constructor属性:****constructor****属性指向****Flower**

**示例:**

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

![70 2][]

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

最后输出都是true

**原型对象**

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

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

**示例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);

原型对象结构：

![70 3][]

flower1和flower2都有proto属性、构造函数Flower和原型对象Flower.prototype；当创建了原型对象之后会自动获得一个constructor属性；同时也可以通过constructor添加其他的属性和方法，再通过实例创建flower1和flower2。

示例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.原型****链** ##

![70 4][]

①**一个原型对象是另一个原型对象的实例**

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

示例：

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

![70 5][]

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

**1.****搜索****实例             2.****搜索****Man.prototype                   3.****搜索****Humans.prototype**

## **完整的原型链** ##

**Object****在原型链中的位置**

![70 6][]

如果没有搜索到会自动的往上一级进行检索；先在Man中进行检索查找是否有getFoot这个方法；如果没有继续向上找到Man.prototype这个原型对象中的相关信息；如果没有继续向上找到Humans.prototype这个原型对象中的相关信息；如果没有继续向上找到Object Prototype这个原型对象中的相关信息；同时明白Object在原型链中的位置在最上层。

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

Man这个构造函数是把所有属性和方法共享；使用时会把数组中的信息进行一个应用。

### **其中man1.clothing和man2.clothing输入的信息一样，为什么？** ###

创建子类型的实例时，不能向父类型的构造函数中传递参数；我们可以使用借用构造函数来解决这样的问题。

【借用构造函数就是在子类构造函数中调用父类构造函数，来实现属性和方法的继承】

### **借用构造函数** ###

**语法：****apply****(\[****thisOjb****\[,****argArray****\]\])**

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

**语法：****call(\[****thisObj****\[,arg1\[,arg2\[,  \[,****argN****\]\]\]\]\])**

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

**示例**

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.****将****原型链和借用构造函数的技术组合到一块****，发挥****二者之长的一种继承****模式**

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

![70 7][]

[70]: /images/20220512/ce3ac3a8f437498894d155c860eeacd4.png
[70 1]: /images/20220512/962ae9f4ab494f7fa2b6a902e306e440.png
[70 2]: /images/20220512/a3b249b16b2447a5900a576a1b328850.png
[70 3]: /images/20220512/3f72176456fa423094289a8cc43b0ad3.png
[70 4]: /images/20220512/f3ffb10356b743eb8df74c42c86c5fdb.png
[70 5]: /images/20220512/d15c4d38adc64cb899cd81a5b1daf709.png
[70 6]: /images/20220512/a79071bb30554e71863140ad5b829cfd.png
[70 7]: /images/20220512/9a8b773e6940400fa00a8fb5f60f984e.png