ES5中的构造函数和ES6的class

构造函数生成的对象叫做实例化对象,它与普通函数是有许多区别的,比如:

  1. 构造函数的命名使用大驼峰命名法;
  2. 构造函数必须搭配关键词new
  3. 构造函数有自己定义属性和方法的语法。

在构造函数中,使用this调用公有属性,这里的this指向是实例化对象;方法一般被定义在函数的prototype属性中是为了让使用同一构造函数生成的实例化对象都是相同方法。

下面用一段简单的代码来演示下构造函数:

<script>

        function CrtObj(name,age,sex){

            this.name = name;

            this.age = age;

            this.sex = sex;

        }

//prototype属性即原型属性,在这个属性中可以存储数据和方法

        CrtObj.prototype.fun = function(){

            console.log(this.name,this.age,this.sex);

        }

            //使用new关键词来调用它

        const obj = new CrtObj('张三',18,'');

        obj.fun();

  </script>

ES6中定义了一个class语法,原理与ES5构造函数语法相同,但语法形式不同。

在这里同样使用一段代码来解释:

//使用class定义函数类名,此时是不需要有()

class CrtObj{

            //constructor是构造器,是class类专门定义属性和属性值的关键词,()中定义形参

            constructor(name,age,sex){

                this.name = name;

                this.age = age;

                this.sex = sex;

            }

            //直接在class内部定义方法,不需要定义在prototype

            fun(){

                console.log(this.name,this.age,this.sex);

            }

        }

        const obj = new CrtObj('张三',18,'');

        obj.fun();

注意:ES6中定义的class类,不是function函数,不会被js程序预解析,所以是不能被提前调用的,但class中定义的方法在class内部虽然没有写function,但js会自动补足,所以是可以在class内部提前调用的

猜你喜欢

转载自www.cnblogs.com/liu--qi-/p/12723313.html
今日推荐