JavaScript——构造函数

185 阅读1分钟

这是我参与更文挑战的第14天,活动详情查看: 更文挑战

构造函数

构造函数是JS中创建对象的另一种方式。相对于字面量“{}”方式创建的对象,构造函数可以创建出一些具有相同特征的对象。这就是为什么我们有了灵活的字面量创建对象的方式却还要使用构造函数来创建对象。

JavaScript内置的构造函数

JavaScript提供了Object、String、Number等构造函数,那我们如和使用呢?通过new关键字来创建对象,人们常将使用new来创建对象的过程叫做实例化的过程,实例化后的对象成为构造函数的实例。

来看例子:

  <script>
    //使用构造函数创建对象
    var o1 = new Object();
    var o2 = new String("JavaScript");
    var o3 = new Number(100);
    //查看对象是由哪个构造函数创建的
    console.log(o1.constructor);
    console.log(o2.constructor);
    console.log(o3.constructor);
    </script>

image.png

自定义构造函数

除了JS中内置的构造函数,用户也能自定义构造函数。 定义时需注意以下两个规则:

  1. 构造函数命名推荐采用帕斯卡命名规则,即所有单词首字母大写
  2. 在构造函数内部使用this表示刚刚创建的对象。

来看一下如何自定义构造函数:

<script>
    //自定义构造函数
    function Person(name,age){
        this.name = name;
        this.age = age;
        this.speak = function(){
            console.log("我是"+this.name);
        };
    }
    //使用构造函数创建对象
    var person1 = new Person('java',10);
    var person2 = new Person('Maria',20);
    //输出对象
    console.log(person1);
    console.log(person2);
    //调用对象的方法
    person1.speak();
    person2.speak();
    </script>

image.png

ES6新增的class关键字

在各种面向对象的编程语言中class关键字的使用非常普遍,而JavaScript为了简化开发人员的难度,新增了class关键字。

<script>
    class Person{
        constructor (name,age,gender){
            this.name = name;
            this.age = age;
            this.gender = gender;
        }
        speak(){
            console.log("我是"+this.name);
        }
    }

    var person = new Person('jack',19,'man');
    person.speak();
    </script>

image.png