JavaScript 使用对象及ES6中的class
2017-10-08 10:56
567 查看
如果我们熟悉C++,Java,C#这类面向对象的语言,会发现它们类的定义很相似。在这类纯粹面向对象的语言中,最基本的程序单位是类,类与类之间提供严格的继承关系。严格使用New关键字创建对象,而new关键字该调用类的构造器。Java语言是纯粹的面向对象的程序设计语言,这主要表现为Java完全支持面向对象的三种基本特征:继承、封装和多态。Java语言完全以对象为中心,Java程序的最小程序单位是类,整个Java程序由一个一个的类组成。
比如我们用Java写一个简单的类,有一个构造函数,一个方法,两个私有变量,一个static静态变量。
上面的代码用C#等语言来写也很类似,那么我们再来看看JavaScript,Javascript中的每个函数都可以用于创建对象,返回的对象既是该类的实例,也是Object类的实例。这种写法跟传统的面向对象语言 C++ 、 Java、c#等差异很大。以前接触的是这类面向对象语言,所以自己刚开始学习Javascript的时候是一脸懵逼的。一段时间后才搞清楚它的套路。
下面是JavaScript的一种写法:
我们可以感受到很大的区别有木有,JavaScript是弱类型语言,变量自然不用指定类型。可以看到Dog的所有实例属性都可以通过对象访问到,就不存在public,private等差异。leg可以直接通过类名来访问名,而不能通过对象来访问
实例属性:在函数中以this前缀修饰的变量,必须通过对象来访问
类属性(静态属性):在函数中以函数名修饰的变量,须通过类名来访问
上面这种写法不是很好,应该尽量避免使用内嵌函数为类定义方法,而应该使用增加prototype属性的方法来增加方法,通过prototype属性来为类动态地增加属性和方法会让程序更安全,性能更稳定。
使用prototype属性来增加方法:
ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。基本上,ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
类的所有方法都定义在类的prototype属性上面。而且有一个constructor方法,这就是构造方法,而this关键字则代表实例对象
ES6写法:
语言是不断发展的,ES6 的class的写法也很容易让人接受。
比如我们用Java写一个简单的类,有一个构造函数,一个方法,两个私有变量,一个static静态变量。
public class Dog { private String name; private int age; public static int leg=4; //静态变量 public Dog(String name,int age){ this.name=name; this.age=age; } public void bark(){ System.out.println(this.name+":汪汪"); } public static void main(String[] args) { Dog dog=new Dog("coco",2); dog.bark(); //coco:汪汪 System.out.println(Dog.leg); //4 } }
上面的代码用C#等语言来写也很类似,那么我们再来看看JavaScript,Javascript中的每个函数都可以用于创建对象,返回的对象既是该类的实例,也是Object类的实例。这种写法跟传统的面向对象语言 C++ 、 Java、c#等差异很大。以前接触的是这类面向对象语言,所以自己刚开始学习Javascript的时候是一脸懵逼的。一段时间后才搞清楚它的套路。
下面是JavaScript的一种写法:
function Dog(name,age){ Dog.leg=4; this.name=name; this.age=age; this.bark=function(){ console.log(this.name+':汪汪'); } } var dog=new Dog('coco',2); dog.bark(); //coco:汪汪 console.log(dog.name); //coco console.log(dog.age); //2 console.log(Dog.leg); //4 console.log(dog.leg); //undefined
我们可以感受到很大的区别有木有,JavaScript是弱类型语言,变量自然不用指定类型。可以看到Dog的所有实例属性都可以通过对象访问到,就不存在public,private等差异。leg可以直接通过类名来访问名,而不能通过对象来访问
实例属性:在函数中以this前缀修饰的变量,必须通过对象来访问
类属性(静态属性):在函数中以函数名修饰的变量,须通过类名来访问
上面这种写法不是很好,应该尽量避免使用内嵌函数为类定义方法,而应该使用增加prototype属性的方法来增加方法,通过prototype属性来为类动态地增加属性和方法会让程序更安全,性能更稳定。
使用prototype属性来增加方法:
function Dog(name,age){ this.name=name; this.age=age; } Dog.leg=4; //类属性 Dog.prototype.bark=function(){ console.log(this.name+':汪汪'); } var dog=new Dog('coco',2); dog.bark(); //coco:汪汪 console.log(dog.name); //coco console.log(dog.age); //2 console.log(Dog.leg); //4 console.log(dog.leg); //undefined
ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。基本上,ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
类的所有方法都定义在类的prototype属性上面。而且有一个constructor方法,这就是构造方法,而this关键字则代表实例对象
ES6写法:
class Dog{ constructor(name,age){ this.name=name; this.age=age; } bark() { console.log(this.name+':汪汪'); } } Dog.leg=4; let dog=new Dog('coco',2); dog.bark(); console.log(dog.name); //coco console.log(dog.age); //2 console.log(Dog.leg); //4
语言是不断发展的,ES6 的class的写法也很容易让人接受。
相关文章推荐
- Javascript ES6中对象类型Sets的介绍与使用详解
- ES6新特性:使用新方法定义javascript的Class
- JavaScript ES6的新特性使用新方法定义Class
- JavaScript使用ES6的Class面向对象继承时 this is not defined 解决方法
- JavaScript ES6中CLASS的使用详解
- ES6新特性:使用新方法定义javascript的Class
- 在MasterPage中使用javascript获取对象
- 在MasterPage中使用javascript获取对象
- 附录A 使用ASP.NET AJAX JavaScript Class Browser查看客户端类型
- 六 JavaScript对象系统的使用
- 使用javascript调用Ado对象操作数据库
- javascript控制realplayer对象使用
- 递归算法在javascript中使用的小技巧 (javascript的对象封装方法介绍)
- 递归算法在javascript中使用的小技巧 (javascript的对象封装方法介绍)
- 使用javascript网页之间的表单对象action的调用
- 递归算法在javascript中使用的小技巧 (javascript的对象封装方法介绍)
- 递归算法在javascript中使用的小技巧 (javascript的对象封装方法介绍)
- 在MasterPage中使用javascript获取对象
- Javascript访问Cookie的四个基本方法无论是在创建页面还是构建对象都会使用到,单独拿出来备用:
- JavaScript对象系统的使用