JavaScript基础知识-构造函数(也称为"类")定义

简介: 本文介绍了JavaScript中构造函数(也称为“类”)的定义和使用方法。

作者:尹正杰
版权声明:原创作品,谢绝转载!否则将追究法律责任。

一.定义一个构造函数(也称为"类")

1>.JavaScript源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>构造函数</title>

    <script type="text/javascript">

        /**
         *  构造函数:
         *      所谓的构造函数就是一个普通的函数,创建方法和普通函数没有区别,不同的是构造函数习惯上首字母大写。
         *      不同的是构造函数习惯上首字母大写。
         *
         *  构造函数的执行流程:
         *      (1)使用new关键字创建一个对象时,立刻在堆内存创建一个新的对象;
         *      (2)将新建的对象设置为函数中this,在构造函数中可以使用this来引用新建的对象;
         *      (3)逐行执行函数中的代码(除了代码是咱们程序员写的,其他的3个步骤都是由浏览器帮咱们实现);
         *      (4)将新建的对象作为返回值返回;
         *
         *  构造函数和普通函数的区别就是调用方式不同:
         *      普通函数就是直接调用,而构造函数需要使用new关键字来调用。
         *
         *  温馨提示:
         *      (1)使用同一个构造函数创建的对象,我们称为一类对象,因此我们也将构造函数称为一个类对象;
         *      (2)我们将通过一个构造函数创建的对象,称为是该类的实例;
         *
         *   this的情况:
         *      (1)当以函数的形式调用时,this是window;
         *      (2)当以方法的形式调用时,谁调用方法this就是谁;
         *      (3)当以构造函数的形式调用时,this就是新创建的那个对象;
         */
        function Person(name,age,address) {
            console.log(this);  // 这个this就是我们函数新建的对象。
            this.name = name;
            this.age = age;
            this.address = address;
            // 需要注意的是,每当我们创建一个新的对象时,并不会创建新的函数,而是都指向了同一个函数对象。相比之前做了优化!
            this.sayHello = function(){
                console.log("I'm %s, and have %d years old. By the way, I live in %s",this.name,this.age,this.address);
            }
            console.log(this);  // 这个this就是我们函数新建的对象。
        }

        // 注意构造函数的调用方式需要加一个new关键字哟~
        var p1 = new  Person("孙悟空",500,"花果山");
        var p2 = new  Person("蜘蛛精",300,"盘丝洞");
        var p3 = new  Person("如来佛祖",1000,"大雷音寺");

        p1.sayHello()
        p2.sayHello()
        p3.sayHello()

        /**
         *  使用instanceof可以检查一个对象是否是一个类的示例,如果是则返回true,否则返回false。其语法格式如下:
         *      对象 instanceof 构造函数
         *
         *  温馨提示:
         *      和Python类的体系一样,任何对象都是object的实例,所以任何对象和Object做instanceof检查时都会返回true。
         */
        console.log(p1 instanceof Person)
        console.log(p2 instanceof Person)
        console.log(p3 instanceof Person)
        console.log(p1 instanceof Object)
        console.log(p2 instanceof Object)
        console.log(p3 instanceof Object)

        // 注意哈,每个Person实例对象都有不同的sayHello方法哟~
        console.log(p1.sayHello == p2.sayHello)

    </script>
</head>
<body>

</body>
</html>

2>.浏览器打开以上代码渲染结果

二.优化上述案例的构造函数(也称为"类")

1>.JavaScript源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>构造函数</title>

    <script type="text/javascript">

        /**
         *  构造函数:
         *      所谓的构造函数就是一个普通的函数,创建方法和普通函数没有区别,不同的是构造函数习惯上首字母大写。
         *      不同的是构造函数习惯上首字母大写。
         *
         *  构造函数的执行流程:
         *      (1)使用new关键字创建一个对象时,立刻在堆内存创建一个新的对象;
         *      (2)将新建的对象设置为函数中this,在构造函数中可以使用this来引用新建的对象;
         *      (3)逐行执行函数中的代码(除了代码是咱们程序员写的,其他的3个步骤都是由浏览器帮咱们实现);
         *      (4)将新建的对象作为返回值返回;
         *
         *  构造函数和普通函数的区别就是调用方式不同:
         *      普通函数就是直接调用,而构造函数需要使用new关键字来调用。
         *
         *  温馨提示:
         *      (1)使用同一个构造函数创建的对象,我们称为一类对象,因此我们也将构造函数称为一个类对象;
         *      (2)我们将通过一个构造函数创建的对象,称为是该类的实例;
         *
         *   this的情况:
         *      (1)当以函数的形式调用时,this是window;
         *      (2)当以方法的形式调用时,谁调用方法this就是谁;
         *      (3)当以构造函数的形式调用时,this就是新创建的那个对象;
         */
        function Person(name,age,address) {
            console.log(this);  // 这个this就是我们函数新建的对象。
            this.name = name;
            this.age = age;
            this.address = address;
            // 需要注意的是,每当我们创建一个新的对象时,并不会创建新的函数,而是都指向了同一个函数对象。相比之前做了优化!
            this.sayHello = sayHi;
            console.log(this);  // 这个this就是我们函数新建的对象。
        }

        /**
         *  将Person类的sayHello方法在全局作用域中定义优缺点:
         *      优点:
         *          对Person类本身做了一个优化,因为不会随着对象的创建从而创建不同的方法啦。
         *       缺点:
         *          (1)污染了全局作用域的命名空间,即全局作用域不能在定义同名的标识符;
         *          (2)定义在全局作用域很不安全,保不齐协同开发时别人定义了和你同名的变量名;
         *
         */
        function sayHi() {
            console.log("I'm %s, and have %d years old. By the way, I live in %s",this.name,this.age,this.address)
        }

        // 注意构造函数的调用方式需要加一个new关键字哟~
        var p1 = new  Person("孙悟空",500,"花果山");
        var p2 = new  Person("蜘蛛精",300,"盘丝洞");
        var p3 = new  Person("如来佛祖",1000,"大雷音寺");

        p1.sayHello()
        p2.sayHello()
        p3.sayHello()

        /**
         *  使用instanceof可以检查一个对象是否是一个类的示例,如果是则返回true,否则返回false。其语法格式如下:
         *      对象 instanceof 构造函数
         *
         *  温馨提示:
         *      和Python类的体系一样,任何对象都是object的实例,所以任何对象和Object做instanceof检查时都会返回true。
         */
        console.log(p1 instanceof Person)
        console.log(p2 instanceof Person)
        console.log(p3 instanceof Person)
        console.log(p1 instanceof Object)
        console.log(p2 instanceof Object)
        console.log(p3 instanceof Object)

        // 注意哈,每个Person实例对象都有不同的sayHello方法哟~
        console.log(p1.sayHello == p2.sayHello)

    </script>
</head>
<body>

</body>
</html>

2>.浏览器打开以上代码渲染结果

三.原型对象

  那么问题来了,上面经过优化后的方案你觉得咋样呢?这个时候你可能会说,虽然做了优化,但却在全局作用域中创建了新的函数对象,从而污染了全局作用域的命名空间。

  想解决上述这个问题,我们就可以引入"原型对象"技术来实现。

  博主推荐阅读:
    https://www.cnblogs.com/yinzhengjie/p/14162082.html
目录
相关文章
|
2月前
|
Web App开发 JavaScript 前端开发
JavaScript 类(class)
JavaScript 类(class)
21 2
JavaScript 类(class)
|
28天前
|
存储 JavaScript 前端开发
Vue.js项目中全面解析定义全局变量的常用方法与技巧
Vue.js项目中全面解析定义全局变量的常用方法与技巧
36 0
|
2月前
|
JavaScript 前端开发
js函数调用与定义
js函数调用与定义
|
2月前
|
JavaScript 前端开发 Java
JavaScript 类知识点概览
概览JavaScript中类的知识点,包括类的定义和实现、添加方法和get/set方法、类的继承和静态方法的使用。通过学生类和人员类的例子,演示了类的构造器、方法定义、继承关系和静态方法的调用。
JavaScript 类知识点概览
|
2月前
|
JavaScript 前端开发 开发者
JavaScript 类继承
JavaScript 类继承
19 1
|
2月前
|
JavaScript 安全
ES6中JS类实现的解读
ES6中JS类实现的解读
22 2
|
1月前
|
前端开发 JavaScript 开发者
深入理解JavaScript中的对象与类
深入理解JavaScript中的对象与类
14 0
|
2月前
|
C++ Windows
HTML+JavaScript构建C++类代码一键转换MASM32代码平台
HTML+JavaScript构建C++类代码一键转换MASM32代码平台
|
2月前
|
C++
HTML+JavaScript构建一个将C/C++定义的ANSI字符串转换为MASM32定义的DWUniCode字符串的工具
HTML+JavaScript构建一个将C/C++定义的ANSI字符串转换为MASM32定义的DWUniCode字符串的工具
|
2月前
|
JavaScript 前端开发
用JavaScript编程定义二维数组并初始化,然后输出元素值
用JavaScript编程定义二维数组并初始化,然后输出元素值