JS高阶—构造函数

最新推荐文章于 2025-07-13 12:47:35 发布

原创最新推荐文章于 2025-07-13 12:47:35 发布 · 92 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言

本文详细介绍了JavaScript中的构造函数、普通函数的区别，实例成员与静态成员的使用，以及原型对象、原型链和`constructor`方法。通过实例演示了如何创建对象和利用原型链共享方法。

1. 构造函数与普通函数

1.1普通函数--主要用来封装处理业务逻辑

1.2构造函数--批量实例化对象

// 普通函数--主要用来封装 处理业务逻辑
        // function fun(形参){
        //     // 代码块
        //     // this（window）
        //     // arguments（参数集合-伪数组）
        // }
        // fun(实参);

        function sum() {
            var sum = 0;
            for (var i = 0; i < arguments.length; i++) {
                sum += arguments[i];
            }
            return sum;
        }
        var rel = sum(1, 2, 3, 5, 5, 6, 6, 7);
        console.log(rel);


        // 构造函数--批量实例化对象
        function Create(name, age, gender) {
            // this--实例化对象
            // arguments
            this.name = name;
            this.age = age;
            this.gender = gender
        }
        var per = new Create("小谷", 18, "男");
        console.log(per);

2. JS构造函数的实例成员和静态成员

1.1.1实例成员

　实例成员就是在构造函数内部添加的成员，只能由实例化的对象来访问

function Person(name, age) {
            this.name = name;
            this.age = age;
            this.run = function () {
                console.log(this.name + '在奔跑');//张三在奔跑
            }
        }

        var p1 = new Person('张三', 20);  // 创建实例化对象
        console.log(p1.name);  // 张三   用实例化对象访问name属性
        p1.run();  // 用实例化对象访问run方法
        console.log(Person.name); //Person

1.1.2静态成员

　在构造函数本身上添加的成员，只能由构造函数本身来访问

function Person(name, age) {
            this.name = name;
            this.age = age;
            this.run = function () {
                console.log(this.name + '在奔跑');
            }
        }
        var p2 = new Person('李四', 24);  // 创建实例化对象
        Person.sex = '男';  // 创建静态成员
        console.log(Person.sex);  // '男'
        console.log(p2.sex); //undefind

1.2构造函数原型prototype

function Create(name, age, gender) {
            // this--实例化对象
            // arguments
            this.name = name;
            this.age = age;
            this.gender = gender;
            // this.rap = function () {
            //     console.log("临时抱佛脚");
            // }
        }
        
        Create.prototype.rap = function () {
            console.log("临时抱佛脚");//临时抱佛脚
        }

        var per = new Create("小谷", 18, "男");
        var per2 = new Create("小谷2", 18, "男");
        var per3 = new Create("小谷2", 18, "男");
        var per4 = new Create("小谷2", 18, "男");
        var per5 = new Create("小谷2", 18, "男");
        var per6 = new Create("小谷2", 18, "男");

        console.log(per);//Create {name: '小谷', age: 18, gender: '男'}
        console.log(per2);//Create { name: '小谷2', age: 18, gender: '男' }
        per.rap();
        per2.rap();
        console.log(Create.prototype);//{rap: ƒ, constructor: ƒ}

JS规定每一个构造函数都有一个属性叫 prototype 它是一个对象，称为原型对象

1.3对象原型

原型：每一个构造函数都有一个prototype属性是原型对象， 每一个对象都一个__proto__ 称为 对象的原型

原型链：对象在查找一个属性的时候，会先在自身查找，如果没有找到，就会在对象的原型（__proto__ ）上查找就是构造函数的prototype，如果还没有找到就会去构造函数的prototype 的__proto__身上查找，直到查找到Object 这样一层一层向上查找形成一个链式结构称为原型链

 function Create(name, age, gender) {
            // this--实例化对象
            // arguments
            this.name = name;
            this.age = age;
            this.gender = gender;
            // this.rap = function () {
            //     console.log("临时抱佛脚");
            // }
        }

        Create.prototype.rap = function () {
            console.log("临时抱佛脚");
        }

        var per = new Create("小谷", 18, "男");
        var per2 = new Create("小谷2", 18, "男");
        console.log(Create.prototype);
        // Create.prototype.__proto__ 指向Object

        console.log(per);
        // 每一个对象都一个__proto__属性这个属性就是对象的原型
        // 对象身上的__proto__ == 构造函数的prototype
        // 因此可以在对象身上访问到  Create.prototype.rap
        console.log(per.rap);

1.4 constructor构造函数

1.4.1 Object.prototype.hasOwnProperty(prop)方法返回值为：布尔值

function Create(name, age, gender) {
            // this--实例化对象
            // arguments
            this.name = name;
            this.age = age;
            this.gender = gender;
            // this.rap = function () {
            //     console.log("临时抱佛脚");
            // }
        }

        Create.prototype.rap = function () {
            console.log("临时抱佛脚");
        }

        var per = new Create("小谷", 18, "男");
        per.height = "178cm";

        console.log(per);
        console.log(per.hasOwnProperty('name'));
        console.log(per.hasOwnProperty('height'));
        console.log(per.hasOwnProperty('rap'));//false

1.4.2 Object.prototype.isPrototypeOf(Object)方法返回一个布尔值

  var date = new Date();
        console.dir(date);

        var reg = new RegExp();
        var num = new Number();
        var obj = {
            name: "123"
        }
        
        console.log(date.isPrototypeOf(Object));//false
        console.log(reg.isPrototypeOf(Object));//false
        console.log(num.isPrototypeOf(Object));//false
        console.log(obj.isPrototypeOf(Object));//false

        console.log(Object.prototype.isPrototypeOf(date));//true
        console.log(Object.prototype.isPrototypeOf(reg));//true
        console.log(Object.prototype.isPrototypeOf(num));//true
        console.log(Object.prototype.isPrototypeOf(obj));//true

扩展(在构造函数身上封装方法)

Array.prototype.sum = function () {

            var rel = 0;
            console.log(this);
            for (var i = 0; i < this.length; i++) {
                rel += this[i];
            }
            return rel;

        }

        var arr = [1, 2, 3, 4, 5, 5, 6, 7, 8];
        var arr2 = [67, 89, 45, 32, 2, 13, 41, 3, 345, 36, 456, 5];

        console.log(arr.sum());
        console.log(arr2.sum());


        // 商品 方法
        Object.prototype.formatting = function () {
            console.log(this);
            if (this.price.includes("￥")) {
                console.log(1);
                return
            } else {
                // replace(target,newStr)
                // this.price.replace()
                this.price = "￥" + this.price
            }
            return this.price
        }
        var obj = {
            title: "小米手机",
            msg: "为发烧而生",
            price: "678"
        }
        var obj2 = {
            title: "好谷",
            msg: "让河南学子创造中国互联网未来",
            price: "￥985"
        }

        console.log(obj.formatting());
        console.log(obj);

1.8原型对象中this指向

构造函数中的this和原型对象的this,都指向我们new出来的实例对象


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;

            height: 300px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
        var box = document.querySelector(".box");
        // 1.普通函数---window
        function fun() {
            console.log(this);
        }
        fun();


        // 2.自执行函数---window
        (function () {
            console.log(this);
        })();

        // 3.定时器---window
        setTimeout(function () {
            console.log(this);
        }, 100)

        // 4.对象方法中的this--该方法所属对象
        var obj = {
            name: "张三",
            sayHi: function () {
                console.log(this);
            }
        }
        obj.sayHi();


        // 5.事件中的this----事件源
        box.onclick = function () {
            console.log(this);
        }

        // 6.构造函数--实例化对象
        function Fun() {
            console.log(this);
        }
        

        // 7.构造函数原型对象上的函数 this-----实例化对象
        Fun.prototype.run = function () { 
            console.log(this);
        }
        var p1 = new Fun();
        p1.run();
    </script>
</body>

</html>