面向对象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 ...
随机推荐
- web项目中url-pattern改成'/'后,js、css、图片等静态资源(404)无法访问问题解决办法
感谢http://blog.csdn.net/this_super/article/details/7884383的文章 1.增加静态资源url映射 如Tomcat, Jetty, JBoss, Gl ...
- oracle日期时间函数 总结
表中存在伪列:sysdate,systimestamp 伪列存在但是不显示 select sysdate from dual; select systimestamp from dual; 日期计算公 ...
- Elasticsearch索引和文档操作
列出所有索引 现在来看看我们的索引 GET /_cat/indices?v 响应 health status index uuid pri rep docs.count docs.deleted st ...
- python加载sqlite3报错:No module named _sqlite3
环境为Ubuntu16.04 Apache2.4 Python2.7.13 django 1.8 今天部署apache+django,经过各种折腾,好不容易配置完了,发现错误Apache的日志里有一项 ...
- java 中变量存储位置的区别
1.寄存器:最快的存储区, 由编译器根据需求进行分配,我们在程序中无法控制. 2. 栈:存放基本类型的变量数据和对象的引用,但对象本身不存放在栈中,而是存放在堆(new 出来的对象)或者常量池中(字 ...
- 连接SQL SERVER数据库实例出错
问题背景: 刚买的新电脑,昨天让公司IT部装了win10专业版系统,想体验一下.装完后一切正常,晚上带回家装自己需要的软件和系统更新,结果今天来公司发现数据库实例连不上了,拿到IT部,他们也没有找到原 ...
- 2~62位任意进制转换(c++)
进制转换的符号表为[0-9a-zA-Z],共61个字符,最大可表示62进制. 思路是原进制先转换为10进制,再转换到目标进制. 疑问: 对于负数,有小伙伴说可以直接将符号丢弃,按照整数进行进位转换,最 ...
- 使用 XML 配置 MyBatis
构建 SqlSessionFactory 最常见的方式是基于 XML 配置(的构造方式).下面的 mybatis-config.xml 展示了一个 典型的 MyBatis 配置文件的样子: XML C ...
- 将百度坐标转换的javascript api官方示例改写成传统的回调函数形式
改写前: 百度地图中坐标转换的JavaScript API示例官方示例如下: var points = [new BMap.Point(116.3786889372559,39.90762965106 ...
- java执行程序的内存分析系列专栏二之static变量和方法内存分析
昨天写了简单的聊了下java执行程序时简单的内存划分,今天我们接着往下聊,聊聊static变量和方法的内存分析. 1.static变量和方法的第一个特性内存分析 statiic变量和方法的第一个特性能 ...