js - ES5面向对象

最新推荐文章于 2023-01-15 22:55:10 发布

不想掉头发的小猴子

最新推荐文章于 2023-01-15 22:55:10 发布

阅读量123

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_57135131/article/details/127889986

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
面向对象

1. 构造函数（类）方式： new 构造函数名()
    使用new 关键字调用的函数，是构造函数，构造函数是专门用来创建对象的函数
    var obj = new Object();   
     
2. 字面量方式---只需要一个时用
    var 对象名 = {
                属性名：属性值，
                属性名：属性值
    }；
3. 自定义构造函数
    3.1 使用工厂方法创建对象
     - 通过该方法可以大批量的创建对象
     - 使用工厂方法创建的对象,使用的构造函数都是Object
        所以创建的对象都是Object这个类型,就导致我们无法区分出多种不同类型的对象
     - 不符合程序员创建对象的行为习惯（new)
        function crearPerson(){}
        var obj = crearPerson();

    3.2 升级后的工厂模式 === 构造函数 -- 模板 (e1.1)
        function Person(name,age,sex){
            this.name = name;
            ...
        }
        let obj = new Person('小美女',18,'女');
     - 描述一下构造函数创建对象时的整个过程（new对象时，具体做了哪些事？)
        1> 调用了构造函数  
        2> 系统会自动创建一个对象  
        3> 系统会自动返回一个对象  
        4> 在构造函数中的this指向 new出来的实例对象
     - 构造函数的缺点：
       构造函数中的内容，只要new一个对象，构造函数中的内容就会重新开辟一次空间，所以造成了大量内存浪费。
    
    3.3 为解决构造函数的缺点-------》原型对象(e1.2)

    3.4 各取优点，取构造函数和原型对象的优点
    function Dog(name){
        //在构造函数中写实例属性
        this.name = name;
    }
    //在对象原型中写原型方法
    Dog.prototype.fn = function(){}
    let dog = new Dog('nana');
     -->
</body>
<script>
    //使用工厂方法创建对象
    function crearPerson(name,age,gender){
        //手动创建对象
        var obj = new Object();
        //手动添加属性
        // obj.name = "1";
        // obj.age = "11";
        // obj.gender= 12;
        obj.name = name;
        obj.age = age;
        obj.gender= gender;
        obj.sayName = function(){
            alert(this.name);
        };
        //手动返回对象
        return obj;
    }
    var obj1 = crearPerson(1,2,3);
    var obj2 = crearPerson(4,5,6);
    var obj3 = crearPerson(7,8,9);
    var obj4 = crearPerson(1,4,7);
    console.log(obj1);
    console.log(obj2);
    console.log(obj3);

    // 升级后的工厂模式 === 构造函数 -- 模板
    function Person(name,age,sex){
        //自动创建对象
        //手动添加成员
        this.name = name;
        this.age = age;
        this.sex = sex;
        //自动返回对象
    }
    let obj = new Person('小美女',18,'女');


    //各取优点，取构造函数和原型对象的优点
    //构造函数
    function Dog(name,age){
        //实例属性
        this.name = name;
        this.age = age;
        //实例方法
        this.eat = function(){
            return '吃吃';
        }
    }
    //原型方法
    Dog.prototype.eat = function(){
        return '吃';
    }

    let dog = new Dog('小黄',3);
    dog.eat = function(){
        return '吃吃吃';
    }
    let dog1 = new Dog('小黑',2);
    console.log(dog.name);
    console.log(dog.eat());//依次向上查找
    console.log(dog.toString());
    console.log(dog);
    console.log(dog.hehe);//null
</script>
</html>

e1.1

<!-- 
    构造函数的语句：
        function 构造函数名-大驼峰命名([参数]){
        //属性
        this.属性名 = 属性值;
        //方法
        this.方法名 = function(){
            //功能
        }
        }

    创建一个构造函数,专门用来创建对象的
        构造函数就是一个普通的函数，创建方式和普通函数没有区别,
        不同的是构造函数习惯上首字母大写

    调用方式
    构造函数和昔通函数的区别就是调用方式的不同
        普通函数是直接调用，而构造函数需要使用new关键字来调用

    构造函数的执行过程
        1.立即创建一个新对象
        2.将新建的对象设置为函数中的this ,在构造函数中可以使用this来引用新建的对象
        3.逐行执行函数中的代码
        4.将新建的对象作为返回值返回

    使用同一个构造对象创建的对象，我们称为一类对象，也将一个构造函数称为一个类
    我们将通过一个构造函数创建的对象，称为该类的实例

    instanceof可以检测一个对象是否是一个类的实例 
-->

e1.2

<!-- 
        
        //原型：原型的空间是共享。原型空间只开辟一次。
        //1. 每一个函数都有一个属性prototype,通过这个属性可以找到该函数对应的原型对象。
        //2. 每一个对象都有一个属性__proto__ ,通过这个属性可以找到该对象对应的原型对象。
            //原型对象通过__proto__,找到父级原型对象，一级一级向上查找的过程，原型链，最终找到的是null
        //3. 每一个原型对象都有一个属性constructor,通过这个属性可以找到该原型对象对应的构造函数。
        //             数组的原型对象  == 数组的原型对象
        console.log(Array.prototype === [].__proto__); //true

        //         数组的构造函数 == 数组对象.原型.构造器 
        console.log(Array === [].__proto__.constructor); //true

        //        数组的原型对象的父级原型对象  ==  Object的原型对象
        console.log(Array.prototype.__proto__ === Object.prototype); //true
        //        数组的原型对象的父级原型对象的父级原型对象 === null
        console.log(Array.prototype.__proto__.__proto__ === null); //true
     -->