面向对象的语言有一个标志,即拥有类的概念,抽象实例对象的公共属性与方法,基于类可以创建任意多个实例对象,一般具有封装、继承、多态的特性!但JS中对象与纯面向对象语言中的对象是不同的,ECMA标准定义JS中对象:无序属性的集合,其属性可以包含基本值、对象或者函数。可以简单理解为JS的对象是一组无序的值,其中的属性或方法都有一个名字,根据这个名字可以访问相映射的值(值可以是基本值/对象/方法)。

1、json格式的面向对象,一个命名空间;适合模块化开发插件。不同的模块使用不同的命名空间。也可用于小型项目的开发。

var person = {
name : 'My name',
age : 18,
getName : function(){
return this.name;
}
}

2、组合构造函数及原型模式

目前最为常用的定义类型方式,是组合构造函数模式与原型模式。构造函数模式用于定义实例的属性,而原型模式用于定义方法和共享的属性。结果,每个实例都会有自己的一份实例属性的副本,但同时又共享着对方方法的引用,最大限度的节约内存。此外,组合模式还支持向构造函数传递参数,可谓是集两家之所长。

function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.lessons = ['Math', 'Physics'];
}
Person.prototype = {
constructor: Person,//原型字面量方式会将对象的constructor变为Object,此外强制指回Person
getName: function () {
return this.name;
}
}
var person1 = new Person('Jack', 19, 'SoftWare Engneer');
person1.lessons.push('Biology');
var person2 = new Person('Lily', 39, 'Mechanical Engneer');
alert(person1.lessons);//Math,Physics,Biology
alert(person2.lessons);//Math,Physics
alert(person1.getName === person2.getName);//true,//共享原型中定义方法

原型模式的缺点是如果属性值是引用类型,那么会造成修改一个对象的这个属性,另一个对象的这个属性也变了。

构造函数模式的缺点是同一种方法每一个实例都有,而不是共享方法。不够优化。

继承

属性的继承:

function Worker(name,age,job){
Person.call(this,name,age); //属性的继承。
this.job = job;
}

方法的继承:

Worker.prototype = {};
for(var i in Person.prototype){
Worker.prototype[i] = Person.prototype[i];
}
Worker.prototype.sayJob = function(){
alert(this.job)
}

完整的继承:

function Person(name,age){
this.name = name;
this.age = age;
this.friends = ['Shelby','Court'];
}
Person.prototype = {
sayName:function(){
alert(this.name);
}
}
function Worker(name,age,job){
Person.call(this,name,age); //属性的继承。
this.job = job;
}
Worker.prototype = {};
for(var i in Person.prototype){
Worker.prototype[i] = Person.prototype[i];
}
Worker.prototype.sayJob = function(){
alert(this.job)
}
var w = new Worker('li',12,'打杂的');
var p = new Person('ai',21);
w.sayName();
w.sayJob();
p.sayName();
p.sayJob();

js中的面向对象程序设计的更多相关文章

  1. Day046--JavaScript-- DOM操作, js中的面向对象, 定时

    一. DOM的操作(创建,追加,删除) parentNode 获取父级标签 nextElementSibling 获取下一个兄弟节点 children 获取所有的子标签 <!DOCTYPEhtm ...

  2. 前端 ---JS中的面向对象

    JS中的面向对象   创建对象的几种常用方式 1.使用Object或对象字面量创建对象 2.工厂模式创建对象 3.构造函数模式创建对象 4.原型模式创建对象 1.使用Object或对象字面量创建对象 ...

  3. python 全栈开发,Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)

    昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...

  4. 前端JavaScript(3)-关于DOM操作的相关案例,JS中的面向对象、定时器、BOM、位置信息

    小例子: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉,就可以 ...

  5. 201871010105-曹玉中《面向对象程序设计(Java)》第一周学习总结

    201871010105-曹玉中<面向对象程序设计(Java)>第一周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这 ...

  6. 201871010105-曹玉中《面向对象程序设计(java)》第十六周学习总结

    201871010105-曹玉中<面向对象程序设计(java)>第十六周学习总结 项目 内容 这个作业属于哪个过程 https://www.cnblogs.com/nwnu-daizh/ ...

  7. 201871010105-曹玉中《面向对象程序设计(java)》第十五周学习总结

    201871010105-曹玉中<面向对象程序设计(java)>第十五周学习总结 项目 内容 这个作业属于哪个过程 https://www.cnblogs.com/nwnu-daizh/ ...

  8. 201871010105-曹玉中《面向对象程序设计(java)》第十四周学习总结

    201871010105-曹玉中<面向对象程序设计(java)>第十四周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ ...

  9. 201871010105-曹玉中《面向对象程序设计(java)》第十三周学习总结

    201871010105-曹玉中<面向对象程序设计(java)>第十三周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ ...

随机推荐

  1. 一、为什么要学习Java虚拟机?

    一.为什么要学习Java虚拟机?       这里我们使用举例来说明为什么要学习Java虚拟机,其实这个问题就和为什么要学习数据结构和算法是一个道理,工欲善其事,必先利其器.曾经的我经常害怕处理内存溢 ...

  2. js中得~~是什么意思/JS按位非(~)运算符与~~运算符的理解分析

    其实是一种利用符号进行的类型转换,转换成数字类型 ~~true == 1 ~~false == 0 ~~"" == 0 ~~[] == 0 ~~undefined ==0 ~~!u ...

  3. C# 操作SQLServer SMO中遇到的几个问题

    业务需求:需要读取数据库中的所有库,得到库之后可以再做后续操作.(win 7  vs2010 sqlserver2008r2) 在读取数据库名的时候,就需要用到Microsoft.SqlServer. ...

  4. JavaMail API的应用

    JavaMail API 是一个用于阅读.编写和发送电子消息的可选包(标准扩展),用来创建邮件用户代理(Mail User Agent,MUA)类型程序. JavaMail API 需要 JavaBe ...

  5. PS 滤镜— —球面化效果

    clc; clear all; close all; addpath('E:\PhotoShop Algortihm\Image Processing\PS Algorithm'); I=imread ...

  6. animation-delay负值

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

  7. BrowserSync(省时的浏览器同步测试工具)

    第一步:安装node 第二步:安装BrowserSync npm install -g browser-sync 第三部:启动BrowserSync 假如我在D盘建立一个文件test,里面分别包括in ...

  8. 1107 Social Clusters (30)(30 分)

    When register on a social network, you are always asked to specify your hobbies in order to find som ...

  9. BZOJ_3550_[ONTAK2010]Vacation&&BZOJ_1283:_序列_网络流解线性规划

    BZOJ_3550_[ONTAK2010]Vacation&&BZOJ_1283:_序列_网络流解线性规划 Description 给出一个长度为 的正整数序列Ci,求一个子序列,使得 ...

  10. 1130 host is not allowed to connect to

    mysql 远程访问不行解决方法 Host is not allowed to connect to this MySQL server 如果你想连接你的mysql的时候发生这个错误: ERROR 1 ...