JavaScript面向对象（高级）

ゞ浴缸里的玫瑰 2022-01-23 04:05 343阅读 0赞

## 1、对象的创建模式有哪些？ ##

> 1、Object构造函数模式  
> 2、对象字面量模式  
> 3、工厂模式  
> 4、自定义构造函数模式  
> 5、构造函数和原型的组合模式

## 1.1 Object构造函数模式 ##

> \*套路：**先创建空Object对象**，**再动态添加属性/方法**  
> \*适用场景：**起始时不确定对象内部数据**

缺点：**语句太多**

<script type="text/javascript">
    
        var p = new Object();
        p.name = 'Tom';
        p.age = 13;
        p.setName = function (name) { 
            this.name = name;
        }
        //测试
        p.setName('Jak');
        console.log(p.name);//Jak
    </script>

## 1.2 对象字面量模式 ##

> \*套路：**使用\{\}创建对象**，**同时指定属性和方法‘**  
> \*使用场景：起始时对象 内部数据是确定的

缺点：
    *问题：如果创建多个对象，有重复代 码

<script type="text/javascript">
        var p= { 
            name : 'Tom',
            age : 13,
            setName:function (name) { 
                this.name = name;
            }
        };
    
        //测试
        p.setName('Jak');
        console.log(p.name);//Jak
    
    </script>

## 1.3工厂模式 ##

1.3.1 什么是工厂函数？  
工厂函数：**返回一个对象的函数**都可以称为工厂函数。

工厂模式：  
\*套路：通过工厂函数**动态创建对象并返回**  
\*使用场景：**需要创建多个对象**

缺点
    *问题：**对象没有一个具体的类型，都是Object类型**

<script type="text/javascript">
    
    function createPerson(name,age){ //工厂函数
        var obj={ //创建对象
            name:name,
            age:age,
            setName:function (name) { 
                this.name = name;
            }
        }
        return obj;//返回对象
    }
    var p1=createPerson('Yom',19);//调用函数
    var p2=createPerson('Tom',12);
    console.log(p1,p2);//返回对象Object，在隐式原型__proto__下的setName不相等
    </script>

## 1.4 自定义构造函数模式(平常使用的多，推荐) ##

> \*套路：自定义构造函数，**通过new创建对象**  
> \*使用场景：**需要创建多个类型确定的对象**

缺点  
\*问题：**每个对象都有相同的数据，浪费内存**

<script type="text/javascript">
    //定义类型
        function Person(name,age) { 
            this.name = name,
                this.age = age,
                this.setName = function (name) { 
                    this.name = name;
                }
        }
    function Student(name,age) { 
        this.name = name,
            this.age = age,
            this.setName = function (name) { 
                this.name = name;
            }
    }
    
        //用new创建实例
        var p1=new Person('Yom',19);
        var p2=new Student('Tom',12);
        p1.name='Jvk';
        console.log(p1 instanceof Person);//true，即对象不再是单一的Object，
        console.log(p1.name,p2.name);//Jvk Tom
    
    </script>

## 1.5构造函数和原型的组合模式 ##

> \*套路：**自定义构造函数，属性在函数中初始化，方法添加到原型上**  
> \*使用场景：需要创建多个类型确定的对象

<script type="text/javascript">
        function Person(name,age) { 
            this.name = name;
            this.age = age
    
        }
    Person.prototype.setName=function (name) { //将方法绑定在构造函数的原型上
        this.name=name;//this
    }
    var p1=new Person('Tom',12);
        var p2=new Person('Jav',22);
    console.log(p1,p2);返回对象，隐式原型上的构造器一样，说明p1和p2是在同一个对象上
        console.log(p1.name);//Tom
    </script>

## 2、继承模式 ##

## 2.1 继承模式有哪些？ ##

> 1、原型继承  
> 2、借用构造函数继承  
> 3、原型和借用构造函数的组合继承

## 2.1原型继承 ##

> 1、套路：  
> \*1.1、定义父类型构造函数  
> \*1.2.、给父类型的原型添加方法  
> \*1.3、定义子类型的构造函数  
> \*1.4、创建父类型的对象赋值给子类型的原型  
> \*1.5、将子类型原型的构造属性设置为子类型  
> \*.1.6、给子类型原型添加方法  
> \*1.7、创建子类型的对象，可调用父类型的方法

2、关键  
\***子类型的原型为父类型的一个实例对象**

<script type="text/javascript">
        //父类型
        function Supper() { 
            this.supProp = 'supProp';
        }
     Supper.prototype.showSupper = function () { //将父类型的方法绑定到原型上
            console.log(this.supProp);
        }
        //子类型
        function SubPper() { 
            this.subProp = 'subProp';
        }
    //实现原型继承的核心代码如下：
        //1.实现继承的方法:子类型的原型为父类型的一个实例对象
        SubPper.prototype = new Supper();
        //2.将SubPper原型的constructor指向SubPper
        SubPper.prototype.constructor=SubPper;
    //给子类型添加方法
        SubPper.prototype.showSubPper = function () { 
            console.log(this.subProp);
        }
        //3.创建子类型的实例
        var sub = new SubPper();
        sub.showSupper();
        sub.toString();
        console.log(sub.constructor);
    </script>

## 2.2借用构造函数继承 ##

> 1、套路  
> \*1、定义父类型的构造函数  
> \*2、定义子类型的构造函数  
> \*3、在子类型构造函数中调用父类型的构造函数

2、关键  
\**在子类型构造函数中通过call()调用父类型构造函数*。**使用call（）借用Person的属性执行**

<script type="text/javascript">
    function Person(name,age){ 
        this.name=name;
        this.age=age;
    }
    function Student(name,age,price) { 
       Person.call(this,age,name);//this是子类型的实例。call是借用执行，相当于this.Person(name,age)
        // this.name=name;
        // this.age=age;
        this.price=price;
    }
    var s=new Student('Tom',12,100)
        console.log(s.name,s.age,s.price);
    </script>

## 2.3原型和借用构造函数的组合继承 ##

>  *  1、利用**原型链实现对父类型对象的方法继承**
>  *  2、利用**call()借用父类型构造函数初始化相同属性**

<script type="text/javascript">
        function Person(name,age){ //创建父类型的构造函数
            this.name=name;
            this.age=age;
        }
        Person.prototype.setName=function (name) { 
            this.name=name;
        }
        //重点一：
        function Student(name,age,price) { 
            Person.call(this,age,name);//call是借用执行，相当于this.Person(name,age)
            // this.name=name;
            // this.age=age;
            this.price=price;
        }
        //重点二：
        //子类型的原型等于父类型的实例，为了看到父类型的方法和属性
        Student.prototype=new Person();
        //修正原型上的constructor
        Student.prototype.constructor=Student;
    
        Student.prototype.setPrice=function (price) { 
            this.price=price;
        }
    
        var s=new Student('Tom',12,2222);
        s.setName('Emoo');
        s.setPrice(10000);
        console.log(s.name,s.age,s.price);
    
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，343人围观）

还没有评论，来说两句吧...

相关阅读

相关《现代Javascript高级教程》面向对象编程与Class

<table> <thead> <tr> <th><a href="https://www.coding-time.cn" rel="nofollow">点击

矫情吗；*/ 2023年10月13日 11:09/ 0 赞/ 65 阅读

相关【第六部分 | JavaScript高级】1：面向对象

目录【第一章】面向对象 | Class创建、构造函数、方法 | Class继承 | 三个注意点 | 静态成员 | 原型对象 \_\_ \_proto\_\_\_

水深无声/ 2023年09月23日 16:18/ 0 赞/ 94 阅读

相关 JavaScript面向对象

/\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ \ 方法一 \ 类、方法、属性都为静态类型 \ 不能创建实例 \\\\\\\\\\\\\\\

我会带着你远行/ 2022年09月30日 03:55/ 0 赞/ 267 阅读

相关面向对象-JavaScript

9.9面向对象对象的组成：属性、方法创建对象的方法 1. 字面量方式创建对象 2. 实例创建对象（代码冗余） 3. 工厂模式创建对象（可以隐藏细节但结构不明

- 日理万妓/ 2022年09月11日 07:29/ 0 赞/ 266 阅读

相关 JavaScript面向对象

一、面向对象 0x1 基本概念对代码的一种抽象，对外统一提供调用接口的编程思想，基于原型的面向对象方式中，对象（object）则是依靠构造器（constructo

待我称王封你为后i/ 2022年05月19日 12:53/ 0 赞/ 344 阅读

相关 JavaScript高级-03_对象高级

对象的创建模式 Object构造函数模式 var obj = {}; obj.name = 'Tom' o

拼搏现实的明天。/ 2022年05月17日 02:36/ 0 赞/ 324 阅读

相关 JavaScript面向对象（高级）

1、对象的创建模式有哪些？ > 1、Object构造函数模式 > 2、对象字面量模式 > 3、工厂模式 > 4、自定义构造函数模式 > 5、构造函数和原型

ゞ浴缸里的玫瑰/ 2022年01月23日 04:05/ 0 赞/ 344 阅读

相关面向对象高级

格式化方法与析构方法 class A: def __init__(self, name, age): self.name = name

水深无声/ 2021年12月03日 16:27/ 0 赞/ 363 阅读

相关 Javascript——面向对象

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

傷城~/ 2021年07月25日 12:58/ 0 赞/ 549 阅读

相关 JavaScript 面向对象

JavaScript 面向对象 JavaScript是一门面向对象的语言，与其他面向对象语言相比具有自己的特点。下面将从总体上对其做一下概述，不会对细节做过多介绍。

小灰灰/ 2020年06月01日 12:45/ 0 赞/ 911 阅读