JavaScript面向对象教程2-类和对象

一.对象

对象：它是一个具体的事物，也是一组无序的相关属性和方法的集合，例如生活中的一本书、一辆车就是对象。

属性：事物的特征，常用名词表示。

方法：事物的行为，常用动词表示。

如图：汽车的外形很好看，能够在道路上行驶。

汽车是对象，外形是属性，行驶是方法。

二.类

类：它可以使用class关键字声明一个类，之后这个类用来实例化对象。

例子：类就像一张设计汽车的图纸，是抽象的，为了设计出真正的汽车。

如图：通过抽象的轮胎类、车门类、颜色类等设计，来构造一辆汽车。

三.创建类和对象

创建类的语法：class name{ }

创建实例：var xx=new name();

代码思路：实参传递给形参，形参再赋值给对象里的name，接着，我们就可以通过对象去访问里面的属性了。

<script> 
   // 1.创建类
   class Person{
       constructor(name,age){
           this.name=name;
           this.age=age;
       }
   }
   //2.利用类创建对象
   var person1=new Person("张三",20);
   var person2=new Person("李四",22);
   console.log(person1.name);
   console.log(person2.name);
</script>   

函数传参是方法，名字、年龄是属性。

总结

①类必须使用new来实例化。

②constructor()方法是类的构造函数，用于传递参数，返回实例对象。

③通过new命令生成对象实例化时，自动调用该方法。如果没有定义，类的内部会自动给我们创建一个constructor()。

④this的作用：用于指向默认的对象。

四.类中添加共有方法

共有方法就是共有的函数。

1.person1与person2对象都用到了共有方法

<script> 
   // 1.创建类
   class Person{
       constructor(name,age){
           this.name=name;
           this.age=age;
       }
       sing(){   //共有方法
           console.log(this.name+"在唱歌");
       }
   }
   //2.利用类创建对象
   var person1=new Person("张三",20);
   var person2=new Person("李四",22);
   person1.sing(); 
   person2.sing(); 
</script>   

总结：类里面的所有函数是不需要写function的。

2.案例升级：在共有函数中，实现传参

<script> 
   // 1.创建类
   class Person{
       constructor(name,age){
           this.name=name;
           this.age=age;
       }
       sing(song){  //共有函数
           console.log(this.name+"在唱"+song);
       }
   }
   //2.利用类创建对象
   var person1=new Person("张三",20);
   var person2=new Person("李四",22);
   person1.sing("李白"); 
   person2.sing("麻雀"); 
</script>   

五.使用类的注意事项

es6：ECMAScript的第6版。

①在es6中，类没有变量提升，所以必须先定义类，才能通过类实例化。

②类里面的共有属性和方法一定要加this

<script> 
   class Person{
       constructor(name,age){
           this.name=name;
           this.age=age;
           this.sing();
       }
       sing(){
           console.log(this.name,this.age);
       }
   }
   var person1=new Person("张三",20);
</script>   

③this的指向问题

从上面的代码可以分析出：

构造函数里面的this指向实例化对象，方法里面的this指向方法的调用者。

篇章

上一篇：JavaScript面向对象教程1-编程中的两种思想

下一篇：JavaScript面向对象教程3-继承