回顾js高级的原型对象知识点

157 阅读1分钟

1.工厂函数和构造函数的对比

1.1 了解工厂函数:作用是用于 创建对象
1.2 重点构造函数:构造函数也是用于创建对象,但是构造函数代码更简洁
构造函数:使用new调用一个函数,这个函数叫做构造函数
1.3 new工作原理4个流程
(1)创建空对象
(2)this指向这个对象 (3)对象赋值 (4)返回这个对象
1.4 new注意点:如果手动在构造函数中return (面试点) return 值类型:无效,还是返回new创建的对象 return 引用类型:有效,会覆盖new创建的对象
执行代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        // 1.工厂函数
        //需求 :  创建很多个对象
        //解决方案: 使用函数
        // function createPerson(name,age,sex){
        //     //1.声明空对象
        //     let p = {}
        //     //2.赋值
        //     p.name = name
        //     p.age = age
        //     p.sex = sex
        //     //3.返回对象
        //     return p
        // }

        // let p1 = createPerson('班长', 20, '男')
        // console.log(p1)

        // let p2 = createPerson('ikun', 30, '男')
        // console.log(p2)
          
        // 2. 构造函数
        function createPerson(name, age, sex) {
            //(1)创建空对象  {}
            //(2)this指向这个对象  this = {}
            //(3)对象赋值
            this.name = name
            this.age = age
            this.sex = sex
            //(4)返回这个对象 return this
            // return [10,20,30]
        }

        //调用者
        let cp1 = new createPerson('班长', 20, '男')
        console.log(p1)

        //调用者
        let cp2 = new createPerson('校长', 30, '男')
        console.log(p2)
    </script>
</body>

</html>

2.原型对象的方法

1.原型对象概况:任何函数在创建的时候,系统会自动创建一个与之对应的对象,称之为原型对象
2.原型对象作用:解决构造函数内存浪费 + 变量污染

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        /* 
        1.原型对象 : 任何函数在创建的时候, 系统会自动创建一个与之对应的对象,称之为原型对象。
        2.原型对象作用 : 解决构造函数  内存浪费 + 变量污染
        */

        //1.构造函数
        function Person(name, age) {
            this.name = name
            this.age = age
        }

        // 2.原型对象的prototype属性指向构造函数
        console.log(Person.prototype)
        // 给原型对象添加方法 
         
        Person.prototype.eat = function () {
            console.log('吃东西')
        }

        Person.prototype.learn = function () {
            console.log('学习')
        }

        // 3.实例对象
        let p1 = new Person('班长', 20)
        let p2 = new Person('校长', 30)
        console.log(p1, p2)
        
        console.log(p1.eat == p2.eat) //true
    </script>
</body>

</html>

以上是有关于原型对象和构造函数的知识回顾,知识一天不看不用,第二天可能就会忘记,写代码时如果忘记某个点就多看看自己写的代码,巩固好知识。每天进步一点,日积月累你会感受到你进了一大步。