一、类和对象
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. WebSocket和kafka实现数据实时推送到前端

    一. 需求背景      最近新接触一个需求,需要将kafka中的数据实时推送到前端展示.最开始想到的是前端轮询接口数据,但是无法保证轮询的频率和消费的频率完全一致,或造成数据缺失等问题.最终确定用利 ...

  2. JavaSE教程-03深入探究原码,反码,补码-扩展

    1.原码,反码,补码的基础概念和计算方法 在搞清楚为什么计算机要使用补码之前,我们先搞清楚一个基本知识点,就是原码,反码,补码的计算方式. 对于一个数,计算机要使用一定的编码方式进行存储,原码,反码, ...

  3. 读书笔记-你不知道的JavaScript(上)

    本文首发在我的个人博客:http://muyunyun.cn/ <你不知道的JavaScript>系列丛书给出了很多颠覆以往对JavaScript认知的点, 读完上卷,受益匪浅,于是对其精 ...

  4. 在ie下,a标签包被img的时候,为什么有个蓝色的边线

    效果像下图这样 那是由于<img>在ie下有默认边框,只要清除边框就可以了,在style中定义 img{ border:none } 显示效果就变成下面这样了 完!

  5. vue2.0实现分页组件

    最近使用vue2.0重构项目, 需要实现一个分页的表格, 没有找到合适的组件, 就自己写了一个, 效果如下: 该项目是使用 vue-cli搭建的, 如果你的项目中没有使用webpack,请根据代码自己 ...

  6. Linq之关键字基本查询

    子句 说明 from 指定数据源和范围变量(类似于迭代变量). where 根据一个或多个由逻辑"与"和逻辑"或"运算符(&& 或 ||)分隔的 ...

  7. 伞兵(Paratroopers)

    伞兵(Paratroopers) 时间限制: 1 Sec  内存限制: 128 MB 题目描述 公元 2500 年,地球和火星之间爆发了一场战争.最近,地球军队指挥官获悉火星入侵者将派一些伞兵来摧毁地 ...

  8. web移动端布局方式整理

    写H5页面一直写的有点随意,只是保证了页面在各个屏幕下显示良好,却没有保证到在各个屏幕下是等比例放大或者缩小.这些天在写一些页面,试着看看能不能写出等比例放大缩小的页面,发现不容易啊,在网上找了一些文 ...

  9. 最全Oracle环境搭建之.NET程序员初遇Oracle

    前言:如果你习惯了傻瓜式的一步步安装,那么Oracle和.NET搭配,绝对会让你头痛不已. 目前我不敢保证自己理解的Oracle理论部分100%正确,但环境安装过程一定可以收藏以备不时之需. 路这么长 ...

  10. kafka 源代码分析之Message(v0.10)

    这里主要更新一下kafka 0.10.0版本的message消息格式的变化. message 的格式在0.10.0的版本里发生了一些变化(相对于0.8.2.1的版本)这里把0.10.0的message ...