JavaScript-构造函数

十二啊

已于 2022-05-06 23:36:43 修改

阅读量1.6k

点赞数

分类专栏：十二的 Javascript 之路文章标签： javascript 前端 typescript

于 2022-05-06 23:34:46 首次发布

十二

本文链接：https://blog.csdn.net/qq_42543177/article/details/124621066

版权

十二的 Javascript 之路专栏收录该内容

22 篇文章 0 订阅

订阅专栏

JavaScript-构造函数

一、创建方式

构造函数和普通函数的创建d并没有区别，只是命名方式不同,构造函数习惯上首字母大写。例如：

//创建一个Person类的构造函数
function Person(name, age) {
   this.name = name;
   this.age = age;
}

二、调用方式

普通函数是直接调用的，而构造函数需要通过new关键字调用。我们将一个构造函数称为一个类。使用同一个构造函数创建的对象，称之为一类对象。通过一个构造函数创建的对象，称为是该类的实例。

// 实例对象shier
let shier = new Person('shier', 12);

三、构造函数的执行流程

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

四、instanceof

使用instanceof可以检查一个对象是否是一个类的实例。语法： 对象 instanceof 构造函数。如果是类的实例，则返回true，否则返回false。例如：

// 判断shier是不是Person的实例
console.log(shier instanceof Person);

注意：所有对象都是object的后代，所以任何对象和object做instanceof检查都会返回true。

// 判断shier是不是Object的实例
console.log(shier instanceof Object);

五、完整示例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>构造函数示例</title>
    <script>
        window.onload = function () {
            // 创建一个Person构造函数
            function Person(name, age) {
                this.name = name;
                this.age = age;
                /*
                 * 在构造函数内部创建的sayName方法
                 *  -每执行一次就会创建一个新的方法
                 *  -这样对于同样的方法多次创建占用空间，损耗性能
                 */
                // this.sayName = function () {
                //     console.log(this.name);
                // }
                // 将sayName放在全局作用域中定义就不会多次创建
                this.sayName = fun;
            }
            function fun() {
                console.log("打印name:", this.name);
            }
            // 创建一个动物类Animal构造函数
            function Animal(name, color) {
                this.name = name;
                this.color = color;
            }
            // 创建一个普通函数
            function fruits(name, color) {
                let obj = new Object();
                obj.name = name;
                obj.color = color;
                return obj;
            }
            // 实例化shier 
            let shier = new Person('shier', 12);
            console.log(shier);
            let ersi = new Person('ersi', 24);
            ersi.sayName();
            // 判断调用的是不是同一个函数
            console.log(shier.sayName == ersi.sayName);
            // 实例化动物
            let duck = new Animal('鸭子', '黄色');
            console.log(duck);
            // 普通函数
            let peach = fruits('桃子', '粉色');
            console.log(peach);

            // 使用instanceof判断一个对象是否是一个类的实例
            console.log(shier instanceof Person);
            console.log(duck instanceof Person);
            console.log(shier instanceof Object);
        }
    </script>
</head>

<body>

</body>

</html>