美文网首页
构造函数和es6知识点

构造函数和es6知识点

作者: 辞苏 | 来源:发表于2018-05-31 19:39 被阅读0次

构造函数

一、构造函数:

说构造函数的概念之前我们应该先了解类的概念,类与对象的概念息息相关,我们在讲对象的概念的时候说过,一只猫是一个对象,一个人是一个对象,一章桌子也是一个对象,那么我们平时说的猫,人,桌子在没有特定指出是哪一个对象的时候,我们其实说的就是类。我们身边有人类,猫也是一个类,任何有相同属性和方法的对象我们都可以称他们为一个类。

在很多面向对象语言中都有类的概念,但是在javascript(es5)中没有类。而我们可以通过构造函数来模拟一个类。

            function Cat(){

this.name='miaomiao';

this.age=12;

this.sayName=function(){

console.log('我们是猫类');

}

}

var cat=new Cat();

console.log(cat.name);

cat.sayName();

构造函数的函数名首字母大写,可以通过在函数中的this为类设置属性和方法,我们在上面的代码中为猫这个类定义了一个name属性,并赋值为"miaomiao",类创建完成后,我们可以通过new关键字创建这个类的实例。例如cat这个变量就是Cat类的一个实例。

我们可以通过传参的方式,在实例化对象的时候为对象设置属性

           function Cat(name,age){

this.name=name;

this.age=age;

this.sayName=function(){

console.log('我是'+this.name);

}

             }

          var cat=new Cat('mioamiao',12);

          cat.sayName();

          console.log(cat);

一个构造函数可以生成多个对象的实例

           function Person(name,age){

           this.name=name;

           this.age=age;

           this.say=function(){

               console.log('大家好');

           }

           }

           var lily=Person('lily',12);

           var lucy=Person('lucy',13);

           console.log(lily);

           console.log(lucy);

           console.log(lily.say==lucy.say);

一个构造函数Person生成了两个对象实例lily和lucy,并且有两个属性和一个方法。但是,它们的say方法是不一样的。也就是说,每当你使用new来调用构造函数放回一个对象实例的时候,都会创建一个hobby方法。这既没有必要,又浪费资源,say方法完全可以被两个对象实例共享。

构造函数的缺点就是:同一个构造函数的对象实例之间无法共享属性或方法。

 为了解决构造函数的对象实例之间无法共享属性的缺点,js提供了prototype属性。

每一个构造函数都有一个prototype属性,这个属性指向一个原型对象,这个原型对象上的所有属性和方法都可以被这个构造函数的实例使用

function Person(name,age){

this.name=name;

this.age=age;

}

Person.prototype.hobby=function(){

return 'movie';

}

var girl=new Cat('rose',12);

var boy=new Cat('jack',18);

console.log(girl.hobby==boy.hobby);

如果将hobby方法放在原型对象上,那么两个实例对象都共享着同一个方法。

Es6知识点

一、ECMAscript

    ECMAscript简称ES,是JavaScript的标准,我们经常说的ES5,ES6等等,可以称作JavaScript的版本,我们在之前学过的所有JavaScript特性,都是基于ES5版本的,今天我们开始讲解的是ES6标准的特性。ES6已更名为ES2015,ES7等后续的版本,我们都可以统称为ES2015+。

二、变量和常量

我们之前一直使用var定义变量,在ES6版本中,我们可以使用let定义变量,下面我们来说说var与let的区别。

块级作用域

   S5只有全局作用域和函数作用域,没有块级作用域的概念,这带来了很多不合理的场景。看下面的代码

    for(var i = 0;i<10;i++){

       console.log(i); // 0-9

}

console.log(i);     // 10

因为没有块级作用域,所以我们在for语句的外面仍然能获取i的值,在实际开发中,这是一个不可理喻的场景,我们希望的是这个i只在for语句内有效,所以再ES6中添加了块级作用域的概念,我们可以用let声明变量,问题就解决了

    for(let i = 0;i<10;i++){

      console.log(i); // 0-9

}

console.log(i);     // 报错 i is not defined

因为用let声明变量,变量只在块级作用域下有效,所以再for语句之外输出i会报错。

不存在变量提升

我们使用var定义变量会发生“变量提升”,我们来看下面的代码

       console.log(number);             //undefied

       var number = 100;               

console.log(string);             //报错

let string = "hello world";

变量提升会导致我们在变量声明之前使用变量也不会报错,但是这个变量的值是undefined,这是不合理的,因为然我们要使用这个变量,那就应该提前声明,如果没有提前声明,就应该给予错误提示。所以再ES6中我们使用let声明变量,如果在声明变量前使用变量就会报错。

关于报错,有些同学会感觉不报错要比报错好,但实际开发中,如果程序运行与我们的语气不符,我们更希望看到错误信息,这样有利于我们更快地发现问题。

不允许重复声明

在ES5中,我们可以多次声明同一个变量

        var a = 10;

        var a = 20;

        let b = 10;

        let b = 20;  //报错

但是多次声明是没有意义的,在ES6中,我们使用let声明变量限制了不能多次声明,如果多次声明同一个变量回报错。

常量

在ES6中,不仅有变量,还增加了常量的概念,我们用const声明常亮,一旦声明,它的值就不能再改变

        const PI = 3.1415926;

        PI = 3                   //报错

我们说常亮不能再改变,说的是不能重新为这个常亮赋值,但是如果常亮存储的是一个对象,那我们是可以改变这个对象的属性的

     const obj = {name:'小明'};

    obj.name = '小红';

    console.log(obj.name);   //小红

相关文章

  • ES5 和 ES6 继承比较:

    ES5构造函数和继承: ES6构造函数和继承:

  • ES6 class类

    ES6 class类知识点梳理 大概从几个方面来讲解ES6 class类和传统的构造函数的区别。 必须要有cons...

  • JavaScript-13 ES6和对象

    ES6类和对象 在ES6之前如果定义一个类? 通过构造函数来定义一个类 在ES6之前定义类就是构造函数,静态属性和...

  • 前端JS进阶二(ES6-Class语法)

    Class和普通构造函数有何区别 前端会使用ES6中的Class来代替JS中的构造函数 JS 构造函数 Class...

  • 构造函数和es6知识点

    构造函数 一、构造函数: 说构造函数的概念之前我们应该先了解类的概念,类与对象的概念息息相关,我们在讲对象的概念的...

  • ES6 类和ES5 构造函数

    ES5的构造函数和ES6的Class区别 ES5的构造函数的原型上的属性和方法可以遍历/ES6 不能够遍历 ES6...

  • Swift基础语法-类的构造函数

    本节知识点 构造函数的介绍 构造函数的基本使用 自定义构造函数 属性与构造函数 1. 构造函数的介绍 构造函数类似...

  • 8. es6 class 类,

    构造函数的缺点不看函数体, 无法知道是普通函数还是构造函数构造函数当做普通函数执行, 会产生全局变量. es6 c...

  • ES6 中 class 与构造函数的关系

    ES6 中 class 与构造函数的关系class 为 构造函数的语法糖,即 class 的本质是 构造函数。c...

  • 面向对象

    一、es6的面向对象 1、class关键字,类和构造器分开了2、class里面直接加方法 以前的构造函数 es6:...

网友评论

      本文标题:构造函数和es6知识点

      本文链接:https://www.haomeiwen.com/subject/qplcsftx.html