一、类和对象
1, JavaScript对象分为三类:本地对象,内置对象,宿主对象。
本地对象有15种:Object Function Array String Number Boolean Date RegExp Error EvalError RangeError
RrefenceError SyntaxError TypeError UIRError
内置对象有2种:Global Math
宿主对象有N中:所有DOM和BOM对象
2,如何在JavaScript中定义一个类和对象
方法一:原始方法

var car = new Object;
car.name = "BMW";
car.color = "blue";
car.showColor = function(){
alert(this.color);
}
car.showColor();

这是最原始的方法,但是有一个缺点就是,如果要创建多个实例,代码会很长。

方法二:工厂方法

function createCar(name,color){
var oCar = new Object;
oCar.name = name;
oCar.color = color;
oCar.showColor = function(){
alert(this.color);
}
return oCar;
}

工厂方法解决了创建多个函数的缺点,但是在语义上不符合传统面向对象的语言的构造函数。

方法三:构造函数方式

function Car(name,color){
this.name = name;
this.color = color;
this.showColor = function(){
console.log(this.color);
}
}
var car1 = new Car("bmw","blue");
car1.showColor();

该方法类似于Java的构造函数,唯一的缺点是无法创造静态变量和方法。

方法四:原型方式

function Car() {
} Car.prototype.color = "blue";
Car.prototype.doors = 4;
Car.prototype.mpg = 25;
Car.prototype.showColor = function() {
alert(this.color);
}; var oCar1 = new Car();
var oCar2 = new Car();

方法五:混合方式

function Car(sColor,iDoors,iMpg) {
this.color = sColor;
this.doors = iDoors;
this.mpg = iMpg;
this.drivers = new Array("Mike","John");
} Car.prototype.showColor = function() {
alert(this.color);
}; var oCar1 = new Car("red",4,23);
var oCar2 = new Car("blue",3,25); oCar1.drivers.push("Bill"); alert(oCar1.drivers); //输出 "Mike,John,Bill"
alert(oCar2.drivers); //输出 "Mike,John"

这是比较常用的方法。

方法六:动态原型方法

function Car(sColor,iDoors,iMpg) {
this.color = sColor;
this.doors = iDoors;
this.mpg = iMpg;
this.drivers = new Array("Mike","John"); if (typeof Car._initialized == "undefined") {
Car.prototype.showColor = function() {
alert(this.color);
}; Car._initialized = true;
}
}

二:继承

1.原型继承,关键是子类的原型指向了一个父类的对象。代码如下,

 function Animal(){
this.gender = "male";
};
function Dog(){
this.name = "huang";
};
Dog.prototype = new Animal();
var dog1 = new Dog();
console.log(dog1.gender);//"male"

2.原型继承的缺点就是父类属性是对象的情况,如下代码,

function Animal(){
this.gender = "male";
this.catlog = ["a","b","c"];
};
function Dog(){
this.name = "huang";
};
Dog.prototype = new Animal();
var dog1 = new Dog();
dog1.catlog.push("d");
var dog2 = new Dog();
console.log(dog2.catlog);// ["a", "b", "c", "d"]

dog1的改动和影响dog2,,因为Dog实例的prototype现在是一个Animal实例,所以dog1和dog2两个实例共享prototype中的属性。于是就出来了组合继承的方式,通过call来执行父类的构造函数

3.组合继承

 function Animal(gender){
this.gender = gender;
this.catlog = ["a","b","c"];
};
function Dog(gender){
Animal.call(this,gender);
this.name = "huang";
};
Dog.prototype = new Animal();
var dog1 = new Dog("asdf");
console.log(dog1.gender);
dog1.catlog.push("d");
console.log(dog1.catlog);//["a", "b", "c"]
var dog2 = new Dog();
console.log(dog2.catlog);// ["a", "b", "c","d"]

面向对象JavaScript的基本概念的更多相关文章

  1. 如何编写可维护的面向对象JavaScript代码

    能够写出可维护的面向对象JavaScript代 码不仅可以节约金钱,还能让你很受欢迎.不信?有可能你自己或者其他什么人有一天会回来重用你的代码.如果能尽量让这个经历不那么痛苦,就可以节省不少时 间.地 ...

  2. javascript,jquery(闭包概念)(转)

    偶尔听人说javascript闭包,让我联想起以前学编译原理和数字逻辑里讲的闭包,以前上课讲的闭包很难懂,而且含有递归的意思在里面,现在不想再查看里面的闭包概念. 但javascript我是经常要用, ...

  3. JavaScript之DOM概念

    一.DOM概念 1.DOM是什么? 1.1 起源.DOM起源于Netscape与Microsoft 公司的DHTML(动态HTML). 1.2 名词解释.Document Object Model,文 ...

  4. JavaScript的基本概念

    主要内容: 语法 数据类型 流控制语句 理解函数 ECMA-262描述了JavaScript语法等基本概念.目前,ECMA-262第3版中定义的ECMAScript是各个浏览器实现最多的版本.所以主要 ...

  5. Python -面向对象(一 基本概念)

    一 Python简单介绍 Python是一个可移植的面向对象的脚本语言. Python尽管是一个脚本语言,但也是一个全然面向对象的语言.由于它设计之初把易用性做为很重要的一个考量标准,所以用起来很简洁 ...

  6. Java面向对象-面向对象编程之基本概念

    面向对象这个概念,每本书上的说法定义很多. 我自己根据我的经验,自己归档总结了下, 所谓面向对象,就是 以基于对象的思维去分析和解决问题,万物皆对象: 面向对象经常和面向过程放一起讨论: 这里举例, ...

  7. Java面向对象_继承——基本概念以及管理化妆品实例分析

    一.继承的基本概念: 1.继承是面向对象三大特征之一 2.被继承的类成为父类(超类),继承父类的类成为子类(派生类) 3.继承是指一个对象直接使用另一个对象的属性和方法 4.通过继承可以实现代码重用 ...

  8. [C++]面向对象的程序设计——重要概念

      1.面向对象程序设计的核心思想是数据抽象.继承和动态绑定.通过使用数据抽象可以将类的接口与实现分离:使用继承,可以定义相似的类型并对其相似的关系建模:使用动态绑定,可以在一定程度上忽略相似类型的区 ...

  9. JavaScript之基本概念(一)

    在我们学习一门编程语言之前,我们应该先了解它的一些基本概念,包括它是什么,它能用来干什么,怎么用等等.这部分内容建议学习时间一天. 一 何为‘JavaScript’ 1 .    什么是JavaScr ...

随机推荐

  1. firstChild,lastChild,nextSibling,previousSibling & 兼容性写法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Nginx上部署HTTPS

    Nginx上部署HTTPS依赖OpenSSL库和包含文件,即须先安装好libssl-dev,且ln -s /usr/lib/x86_64-linux-gnu/libssl.so  /usr/lib/, ...

  3. 每篇半小时1天入门MongoDB——3.MongoDB可视化及shell详解

    本篇主要介绍MongoDB可视化操作以及shell使用及命令,备份恢复.数据导入导出. MongoVUE安装和简单使用 使用mongo.exe 管理数据库虽然可行,功能也挺强大,但每次都要敲命令,即繁 ...

  4. Akka(7): FSM:通过状态变化来转换运算行为

    在上篇讨论里我们提到了become/unbecome.由于它们本质上是堆栈操作,所以只能在较少的状态切换下才能保证堆栈操作的协调及维持程序的清晰逻辑.对于比较复杂的程序流程,Akka提供了FSM:一种 ...

  5. 【论文:麦克风阵列增强】Signal Enhancement Using Beamforming and Nonstationarity with Applications to Speech

    作者:桂. 时间:2017-06-06 13:25:58 链接:http://www.cnblogs.com/xingshansi/p/6943833.html 论文原文:http://pan.bai ...

  6. PHP 防恶意刷新实现代码

    本质还是采用session方式进行时间比较,在单位时间内允许访问或者访问次数,如果有使用反向代理的话,也可以采用nginx配置 <?phpsession_start();  $k=$_GET[' ...

  7. [转] (CQRS)命令和查询责任分离架构模式(一) 之 什么是CQRS

    什么是CQRS? 这个问题网上可以找到很多资料,未接触过的童鞋请先查看Udi Dahan, Grey Young, Rinat Abdullin,园子里dax.net,以及Jdon社区上的相关文章. ...

  8. AngularJS <a> 超链接标签不起作用?

    问题描述: Angular JS app中,使用超链接标签<a href='location'>click</a> 不起作用. 解决方法: 如果你不巧配置了$locationP ...

  9. 解密SuperWebview的一种另类方法

    解密SuperWebview的一种另类方法 什么是SuperWebview SuperWebview是APICloud官方推出的另一项重量级API生态产品,以SDK方式提供,致力于提升和改善移动设备W ...

  10. Linux: 安装和启用firefox浏览器的java

    之前在linux服务器上浏览一个网页时必须启用java才可以,但是自己只是一个服务器的普通用户,并没有root权限,所以只能把java装在自己的目录下面,因此不能用rpm包,而必须从Oracal官网下 ...