面向对象JavaScript的基本概念
一、类和对象
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的基本概念的更多相关文章
- 如何编写可维护的面向对象JavaScript代码
能够写出可维护的面向对象JavaScript代 码不仅可以节约金钱,还能让你很受欢迎.不信?有可能你自己或者其他什么人有一天会回来重用你的代码.如果能尽量让这个经历不那么痛苦,就可以节省不少时 间.地 ...
- javascript,jquery(闭包概念)(转)
偶尔听人说javascript闭包,让我联想起以前学编译原理和数字逻辑里讲的闭包,以前上课讲的闭包很难懂,而且含有递归的意思在里面,现在不想再查看里面的闭包概念. 但javascript我是经常要用, ...
- JavaScript之DOM概念
一.DOM概念 1.DOM是什么? 1.1 起源.DOM起源于Netscape与Microsoft 公司的DHTML(动态HTML). 1.2 名词解释.Document Object Model,文 ...
- JavaScript的基本概念
主要内容: 语法 数据类型 流控制语句 理解函数 ECMA-262描述了JavaScript语法等基本概念.目前,ECMA-262第3版中定义的ECMAScript是各个浏览器实现最多的版本.所以主要 ...
- Python -面向对象(一 基本概念)
一 Python简单介绍 Python是一个可移植的面向对象的脚本语言. Python尽管是一个脚本语言,但也是一个全然面向对象的语言.由于它设计之初把易用性做为很重要的一个考量标准,所以用起来很简洁 ...
- Java面向对象-面向对象编程之基本概念
面向对象这个概念,每本书上的说法定义很多. 我自己根据我的经验,自己归档总结了下, 所谓面向对象,就是 以基于对象的思维去分析和解决问题,万物皆对象: 面向对象经常和面向过程放一起讨论: 这里举例, ...
- Java面向对象_继承——基本概念以及管理化妆品实例分析
一.继承的基本概念: 1.继承是面向对象三大特征之一 2.被继承的类成为父类(超类),继承父类的类成为子类(派生类) 3.继承是指一个对象直接使用另一个对象的属性和方法 4.通过继承可以实现代码重用 ...
- [C++]面向对象的程序设计——重要概念
1.面向对象程序设计的核心思想是数据抽象.继承和动态绑定.通过使用数据抽象可以将类的接口与实现分离:使用继承,可以定义相似的类型并对其相似的关系建模:使用动态绑定,可以在一定程度上忽略相似类型的区 ...
- JavaScript之基本概念(一)
在我们学习一门编程语言之前,我们应该先了解它的一些基本概念,包括它是什么,它能用来干什么,怎么用等等.这部分内容建议学习时间一天. 一 何为‘JavaScript’ 1 . 什么是JavaScr ...
随机推荐
- 这是假的JS——利用CSS Animation实现banner图非交互循环播放
话不多说,先来张html和css代码截图~ 注意事项: 1.如果想在每张图前进行停顿,可以在keyframes中的每一步前加上一小段与下一张相同的代码: 2.如果想要在实现无违和感的最后一张与第一张的 ...
- 一天搞定CSS:字体font--04
1.字体体系 2.字体各属性取值 说明: 每一个属性后面的分支是属性值,以及对属性值的说明. 比如font-weight- - - -有两个取值:bold,normal 3.演示代码 <!DOC ...
- java基础-四种方法引用
实例 直接三角形,通过两边算第三边,目的是为了如何使用这几种方法引用.代码中多有些不合适,尽情原谅. 静态方法引用 接口的参数列表与类中的具体实现方法的参数列表一样,返回值一致. 调用 //静态引用 ...
- 初识webpack——webpack四个基础概念
前面的话 webpack是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.当webpack处理应用程序时,它会递归地构建一个依赖关系图表 ...
- Perl正则表达式例子
Perl正则表达式 一.介绍 正则表达式各语言都有自己的规范,但是基本都差不多,都是由元字符的组合来进行匹配:由于Nmap内嵌的服务与版本探测是使用的Perl正则规范,因此此篇博客记录一下Perl正则 ...
- css3特效详解
好吧,CSS3 3D transform变换,不过如此! 这篇文章发布于 2012年09月7日,星期五,01:05,归类于 css相关. 阅读 408042 次, 今日 34 次 一.写在前面的秋裤 ...
- python flask(多对多表查询)
我们在flask的学习中,会难免遇到多对多表的查询,今天我也遇到了这个问题.那么我想了好久.也没有想到一个解决的办法,试了几种方法,可能是思路的限制我放弃了,后来,我就在网上百度,可是发现百度出来的结 ...
- ISO文件:AMD64和i386的区别
下载kali系统时,出现两个选项:ADM64和i386,那么这两者的区别是什么? i386=Intel 80386.其实i386通常被用来作为对Intel(英特尔)32位微处理器的统称. AMD6 ...
- Java+XSL合并多个XML文件
使用 Java 解析 XML 文件有许多成熟的工具,如 dom4j 等等.但在一些场景中,我们可能使用 Ant.Maven 等构建工具对多个 XML 文件进行合并,我们希望可以直接通过脚本文件,或者简 ...
- PHP中对汉字进行UNICODE编码和解码的实现
<?php /** PHP中对汉字进行UNICODE编码和解码的实现 **/ class Helper_Tool{ //php中的unicode编码转中文 static function uni ...