js类的基本含义

我们知道,在js中,是没有类的概念的。类的所有实例对象都从同一个原型对象上继承属性,因此,原型对象是类的核心。

类是对象的抽象,而对象是类的具体实例。类是抽象的,不占用内存,而对象是具体的,占用存储空间。———百度百科

早期的javascript需求都很简单,基本都是写成函数的,然后是面向过程的写法,后来慢慢的引入面向对象开发思想,再后来就慢慢写成 

js中,写成类的本质基本都是 构造函数+原型。下面,就讨论一下js类的几种写法:

构造函数 法

/**
* Person类:定义一个人,有name属性和getName方法
*/
<script>
function Person(name){
this.name = name;
this.getName = function(){
return this.name;
}
} //我们在这里实例化几个对象 var p1 = new Person("trigkit4");
var p2 = new Person("mike"); console.log(p1 instanceof Person);//true
console.log(p2 instanceof Person);//true
</script>

由上面控制台输出结果可知,p1和p2的确是类Person的实例对象。instanceof操作符左边是待检测类的对象,右边是定义类的构造函数。这里,instanceof用来检测对象p1是否属于Person类。

这种方式的优点是:我们可以根据参数来构造不同的对象实例 ,缺点是每次构造实例对象时都会生成getName方法,造成了内存的浪费 。

我们可以用一个外部函数来代替类方法,达到了每个对象共享同一个方法。改写后的类如下:

//外部函数
<script>
function getName() {
return this.name;
} function Person(name){
this.name = name;
this.getName = getName;//
}
</script>

原型方式

<script>
function Person(){};
Person.prototype.name = "trigkit4";//类的属性都放在prototype上
Person.prototype.getName = function(){
return " I'm " + this.name;
} var p1 = new Person();
var p2 = new Person();
console.log(p1.name);//trigkit4
console.log(p2.getName());//I'm trigkit4
</script>

原型方式的缺点就是不能通过参数来构造对象实例 (一般每个对象的属性是不相同的) ,优点是所有对象实例都共享getName方法(相对于构造函数方式),没有造成内存浪费 。

构造函数+原型方式

取前面两种的优点:
a、用构造函数来定义类属性(字段)。
b、用原型方式来定义类的方法。

<script>
function Person(name){
this.name = name;
} //原型的特性可以让对象实例共享getName方法
Person.prototype.getName = function(){
return " I'm " + this.name;
}
</script>

这样,我们就既可以构造不同属性的对象,也可以让对象实例共享方法,不会造成内存的浪费。

为了让js代码风格更紧凑,我们让prototype方法代码移到function Person的大括号内。

<script>
function Person(name){
this.name = name;
Person.prototype.getName = function(){
return this.name;
}
} var p1 = new Person('trigkit4');
console.log(p1.getName());//trigkit4
</script>

在这里,我们需要知道的几种定义类的方法,除了上面的构造函数外,还有:

Object.create()方法

用这个方法,"类"就是一个对象,而不是函数。

var Person = {
name : "trigkit4",
age : 21,
run: function(){
alert("I like running");
}
}

然后,直接用Object.create()生成实例,不需要用到new。

var p1 = Object.create(Person);
alert(p1.age);//
p1.run();//I like running

这种方法比"构造函数法"简单,但是不能实现私有属性和私有方法,实例对象之间也不能共享数据,对"类"的模拟不够全面。

createNew()方法

这种方法不需要用到this和prototype,其做法是用对象来模拟一个类,然后在类里面定义一个构造函数createNew(),然后在createNew()里面定义实例对象,把这个实例对象作为返回值。

<script>
var Person = { createNew : function () {
var person = {};
person.name = "trigkit4";
person.run = function(){
alert("I like running");
};
return person;
} }
</script>

使用的时候,调用createNew()方法,就可以得到实例对象。

var p1 = Person.createNew();
p1.run();//I like running

这种写法其实和对象字面量的写法是很类似的,只不过一个是逗号分隔,一个是分号分隔。

JavaScript类的写法的更多相关文章

  1. JavaScript类的写法(一)

    转自:http://segmentfault.com/a/1190000000725051 js类的基本含义 我们知道,在js中,是没有类的概念的.类的所有实例对象都从同一个原型对象上继承属性,因此, ...

  2. javascript类的理解和使用

    距离上次写博客已经过去好几个月了,现在手里的项目正好都结束了,闲暇之后开始理一下开发中一些问题,这次说一下javascript当中的类,可能很多人对于写惯了前台页面效果的coder来说,对于javas ...

  3. 第九章:Javascript类和模块

    (过年了,祝大家新年好!) 第6章详细介绍了javascript对象,每个javascript对象都是一个属性集合,相互之间没有任何联系.在javascript中也可以定义对象的类,让每个对象都共享某 ...

  4. javascript面向对象的写法03

    javascript面向对象的写法03 js一些基础知识的说明 prototype 首先每个js函数(类)都有一个prototype的属性,函数是类.注意类有prototype,而普通对象没有. js ...

  5. javascript面向对象的写法01

    类和对象 其他面向对象的语言类的语法是内置的,自然而然的事.javascript中有对象,但没有类的语法,类的实现需要模拟出来. 只需要把对象想成一个容器,里面存放一些属性或方法,把类想象成一个对象的 ...

  6. javascript 代替jqueryeach写法

    javascript 代替jqueryeach写法 // 通过字面量方式实现的函数each var each = function(object, callback){ var type = (fun ...

  7. JavaScript 类式继承与原型继承

    交叉着写Java和Javascript都有2年多了,今天来总结下自己所了解的Javascript类与继承. Javascript本身没有类似Java的面向对象的类与继承术语,但其基于原型对象的思想却可 ...

  8. 一种JavaScript 类的设计模式

    一种JavaScript 类的设计模式尽管前面介绍了如何定义一个类,如何初始化一个类的实例,但既可以在function定义的函数体中添加成员,又可以用prototype 定义类的成员,代码显的很混乱, ...

  9. Hibernate中Entity实体类的写法

    记录下一个Entity类的写法,方便以后查阅: package com.bupt.auth.entity; import java.util.Date; import javax.persistenc ...

随机推荐

  1. BZOJ2612 : [Poi2003]Sums

    设d[i]表示能拼出的x中满足x%a[0]=i的最小的x,其中d[0]=0. 若d[x%a[0]]<=x,则一定可以拼出x,否则一定不可以. 建出带权有向图,点的标号从0到a[0]-1,i号点向 ...

  2. java使用代理模拟http get请求

    直接上代码: import java.io.BufferedReader; import java.io.InputStreamReader; import java.net.InetSocketAd ...

  3. CentOS安装CLI

    #使用root账号 vim /etc/yum.repos.d/epel.repo [epel] name=epel baseurl=http://mirrors.sohu.com/fedora-epe ...

  4. oracle 删除字段中空格

    update  sales_report set region =  REGEXP_REPLACE(region,  '( ){1,}', '')

  5. 【防火墙技术连载11】强叔侃墙 攻击防范篇 流量型攻击之UDP Flood及防御

    http://support.huawei.com/huaweiconnect/enterprise/thread-214141.html

  6. StatCounter

    StatCounter provides free customisable hit counters, visitor tracking, web analytics and website sta ...

  7. ASP.NET Web API中实现版本的几种方式

    在ASP.NET Web API中,当我们的API发生改变,就涉及到版本问题了.如何实现API的版本呢? 1.通过路由设置版本 最简单的一种方式是通过路由设置,不同的路由,不同的版本,不同的contr ...

  8. 【ELK】4.spring boot 2.X集成ES spring-data-ES 进行CRUD操作 完整版+kibana管理ES的index操作

    spring boot 2.X集成ES 进行CRUD操作  完整版 内容包括: ============================================================ ...

  9. 实习医生风云第一至九季/全集Scrubs迅雷下载

    本季看点:<实习医生风云>一批医学院的学生来到圣心医院开始他们的实习生涯,但是从第一天起就发现这里并不是想象中安详宁静的医学圣地,从医生到护士甚至门卫个个不同寻常.内科实习医生杰迪是个聪明 ...

  10. Java中线程池,你真的会用吗?

    在<深入源码分析Java线程池的实现原理>这篇文章中,我们介绍过了Java中线程池的常见用法以及基本原理. 在文中有这样一段描述: 可以通过Executors静态工厂构建线程池,但一般不建 ...