0x00 准备工作

JavaScript 语言中,生成实例对象的传统方法是通过构造函数。

       function Animal(name,age){
this.name = name;
this.age = age; }
Animal.prototype.showName = function(){
console.log(this.name);
console.log(this.age);
} var a = new Animal('小黄',5);
a.showName();

上面这种写法跟传统的面向对象语言(比如 C++ 和 Java)差异很大,很容易让新学习这门语言的程序员感到困惑。

ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。

基本上,ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用 ES6 的class改写,就是下面这样

          class Animal{

            // 构造器  当你创建实例之后 constructor()方法会立刻调用 通常这个方法初始化对象的属性
constructor(name,age){
this.name = name;
this.age = age;
}
showName(){
console.log(this.name);
}
}
var a2 = new Animal('点点',3);

上面代码定义了一个“类”,可以看到里面有一个constructor方法,这就是构造方法,而this关键字则代表实例对象。也就是说,ES5 的构造函数Animal,对应 ES6 的Animal类的构造方法。

Animal类除了构造方法,还定义了一个showName方法。注意,定义“类”的方法的时候,前面不需要加上function这个关键字,直接把函数定义放进去了就可以了。另外,方法之间不需要逗号分隔,加了会报错。

ES6 的类,完全可以看作构造函数的另一种写法。

console.log(Animal2===Animal2.prototype.constructor);//true

上面代码表示,类本身就指向了类的构造函数。

使用的时候,也是直接对类使用new命令,跟构造函数的用法完全一致。

0x01 Constructor方法

constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法。一个类必须有constructor方法,如果没有显式定义,一个空的constructor方法会被默认添加。

class Animal {
} // 等同于
class Animal {
constructor() {}
}

上面代码中,定义了一个空的类Point,JavaScript 引擎会自动为它添加一个空的constructor方法。

Vue学习笔记之Vue的面向对象的更多相关文章

  1. 【Vue学习笔记】—— vue的基础语法 { }

    学习笔记 作者:oMing vue v-on: 简称 @ <div id='app'> <button v-on:click='Show1'> </button> ...

  2. vue学习笔记(二)vue的生命周期和钩子函数

    前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...

  3. vue学习笔记:vue的认识与特点与获取

    Vue了解 Vue:读作 view Vue是一个渐进式框架 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整 ...

  4. vue学习笔记—bootstrap+vue用户管理

    vue,读音view,简单易用的前端框架.特点如下: 1.一个mvvm的前端框架,内部做好了html中dom对象和后台用js语言定义的变量的双向绑定 2.中国人尤雨溪维护的个人项目,中文资料多,和go ...

  5. Vue学习笔记之Vue学习前的准备工作

    0x00 起步 1.扎实的HTML/CSS/Javascript基本功,这是前置条件. 2.不要用任何的构建项目工具,只用最简单的<script>,把教程里的例子模仿一遍,理解用法.不推荐 ...

  6. VUE学习笔记之vue cli 构建项目

    一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...

  7. Vue学习笔记之Vue组件

    0x00 前言 vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来.组件的使用更使我们的项目解耦合.更加符合vue的设计思想MVVM. 那接下来就跟我看一下如何在一个Vue实例 ...

  8. Vue学习笔记之Vue知识点补充

    0x00 修饰符 .lazy 在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 .你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步: &l ...

  9. Vue学习笔记之Vue指令系统介绍

    所谓指令系统,大家可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了. 在vue中,指令系统,设置一些命令之后,来操作我们的数据属性,并展示到我们的DOM上. OK,接下来我们 ...

随机推荐

  1. thinkjs——art-template模板用法

    前言: 概述之前先附上此正式版介绍地址:https://github.com/aui/artTemplate  or http://www.jq22.com/jquery-info1097,可以再看下 ...

  2. piblog 0.2

    在一个Web App中,所有的数据,包括用户的信息,日志,评论等,都存在数据库中.在piblog中使用MySQL作为数据库.Web App中由很多地方需要使用数据库.访问数据库需要创建数据库连接.游标 ...

  3. 【Linux】WinSCP普通用户登录sftp后切换到root权限

    工具: Xshell   winscp 服务器环境: linux  centos7 背景:普通用户使用winscp账户登录服务器,没有操作权限 1 普通用户,通过Xshell登录服务器.输入以下命令, ...

  4. css基础---->学习html(一)

    这里零散的总结一下观看css权威指南书的知识.生命中的诸多告别,比不辞而别更让人难过的,是说一句再见,就再也没见过. 一.首字母与首行的伪类 <dvi> <p>I love y ...

  5. 域名绑定和域名解析(DNS)有什么不同?(转载)

    域名解析在DNS处设置,DNS服务器将你的域名指向你的存储网页的服务器. 域名绑定在服务器中设置,存储你网页文件的服务器绑定了你的域名才能把浏览者引导到这个域名指定的物理位置来访问. 比如,你进一个高 ...

  6. nodejs 重定向 (redirect + writeHead(Location))

    参考: Node.js实现301.302重定向服务 Express URL跳转(重定向)的实现:res.location()与res.redirect() 一 方式1 index.js var htt ...

  7. IOS中使用轻量级数据库

    IOS中使用轻量级数据库 目录 概述 IOS中的轻量级数据库 sqlite的方法 数据库的实用操作 第三方类库 FMDatabase 概述 IOS中的轻量级数据库 sqlite的方法 sqlite3 ...

  8. flex弹性布局属性详解!

    详细看下flex弹性布局具体属性: flex容器属性详解:flex-direction:row/column:(横排/竖排) 决定元素的排列方向:flex-wrap:nowrap/wrap/wrap- ...

  9. 转载:隐式Intent

    一.隐式意图介绍 显式意图我们前面已经提到,形如: Intent intent = new Intent(); intent.setClass(this,Other.class); //此句表示显式意 ...

  10. python re.sub 括号匹配替换匹配到的内容后接数字

    如果代码为: text = re.sub(r'(?<=[{])([a-z]+)6(?=[}])', r'\13', text) 上面代码会报错,因为没有组合13,所以不能获得组合13的内容. 但 ...