JS中的面向对象
创建对象的几种常用方式:
1,使用Object或对象字面量创建对象。
2,工厂模式创建对象。
3,构造函数模式创建对象。
4,原型模式创建对象。
使用Object或对象字面量创建对象:
var student = new Object();
student.name = '顾清秋';
student.age = '17';
字面量方式创建对象:
var student = {
name:"顾清秋",
age:17
};
工厂模式创建对象:
JS中没有类的概念,那么我们不妨就使用一种函数将以上对象创建过程封装起来以便于重复调用,同时可以给出特定接口来初始化对象。
function createStudent(name,age){
var obj = new Object();
obj.name = name;
obj.age = age;
return obj;
}
var student1 = createStudent('qingqiu1',17);
var student2 = createStudent('qingqiu2',17);
这样一来我们就可以通过createStudent函数源源不断地”生产”对象了。看起来已经高枕无忧了,但贪婪的人类总有不满足于现状的天性:我们不仅希望”产品”的生产可以像工厂车间一般源源不断,我们还想知道生产的产品究竟是哪一种类型的。
比如说,我们同时又定义了”生产”水果对象的createFruit()函数:
function createFruit(name, color) {
var obj = new Object();
obj.name = name;
obj.color = color;
return obj;
} var v1 = createStudent("easy1", 20);
var v2 = createFruit("apple", "green");
对于以上代码创建的对象v1、v2,我们用instanceof操作符去检测,他们统统都是Object类型。我们的当然不满足于此,我们希望v1是Student类型的,而v2是Fruit类型的。为了实现这个目标,我们可以用自定义构造函数的方法来创建对象
构造函数模式创建对象:
var arr = new Array(10); //构造一个初始长度为10的数组对象
构造函数和普通函数的区别:
1,实际上并不存在创建构造函数的特殊语法,其与普通函数唯一的区别在于调用方法。对于任意函数,使用new操作符调用,那么他就是构造函数,不使用new操作符调用,它就是普通函数。
2,按照惯例,我们约定构造函数名以大写字母开头,普通函数以小写字母开头,这样有利于区分二者。
3,使用new操作符调用构造函数时,会经历:
1,创建一个新对象。
2,将构造函数作用域赋给新对象(this指向该新对象)。
3,执行构造函数代码。
4,返回新对象。
使用构造函数将工厂模式函数重写,并添加一个方法属性:
function Student(name,age){
this.name = name;
this.age = age;
this.alertName = function(){
alert(this.name);
}
}
function Fruit(name,color){
this.name = name;
this. color = color;
this.alertName = function(){
alert(this.name);
}
}
var v1 = new Student('qingqiu',17);
var v2 = new Fruit('apple',"red");
console.log(v1);
console.log(v2);
v1.alertName()
v2.alertName()
这时我们再用instanceofcao'zuo
alert(v1 instanceof Student); //true
alert(v2 instanceof Student);//false
alert(v1 instanceof Fruit); //false
alert(v2 instanceof Fruit); //true
这样我们就解决了工厂模式
无法区分对象类型的尴尬。那么使用构造方法来创建对象是否已经完美了呢?使用构造器函数通常在js中我们来创建对象。
我们会发现Student和Fruit对象中共有同样的方法,当我们进行调用的时候这无疑是内存的消耗。
我们完全可以在执行该函数的时候再这样做,办法是将对象方法移到构造函数外部:
function Student(name, age) {
this.name = name;
this.age = age;
this.alertName = alertName;
} function alertName() {
alert(this.name);
} var stu1 = new Student("easy1", 20);
var stu2 = new Student("easy2", 20);
在调用stu1.alertName()时,this对象才被绑定到stu1上。
我们通过将alertName()函数定义为全局函数,这样对象中的alertName属性则被设置为指向该全局函数的指针。由此stu1和stu2共享了该全局函数,解决了内存浪费的问题
但是,通过全局函数的方式解决对象内部共享的问题,终究不像一个好的解决方法。如果这样定义的全局函数多了,我们想要将自定义对象封装的初衷便几乎无法实现了。更好的方案是通过原型对象模式来解决。
原型的模式创建对象:
function Student(name,age){
this.name = name;
this.age = age;
}
Student.prototype.alertName = function(){
alert(this.name);
}
var stu1 = new Student('qingqiu',17);
var stu2 = new Student('xiaobai',17); stu1.alertName();
stu2.alertName(); alert(stu1.alertName == stu2.alertName);
JS中的面向对象的更多相关文章
- Day046--JavaScript-- DOM操作, js中的面向对象, 定时
一. DOM的操作(创建,追加,删除) parentNode 获取父级标签 nextElementSibling 获取下一个兄弟节点 children 获取所有的子标签 <!DOCTYPEhtm ...
- 前端 ---JS中的面向对象
JS中的面向对象 创建对象的几种常用方式 1.使用Object或对象字面量创建对象 2.工厂模式创建对象 3.构造函数模式创建对象 4.原型模式创建对象 1.使用Object或对象字面量创建对象 ...
- python 全栈开发,Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)
昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...
- 前端JavaScript(3)-关于DOM操作的相关案例,JS中的面向对象、定时器、BOM、位置信息
小例子: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉,就可以 ...
- 《JS中的面向对象技术》
内容要点: 1.什么是对象:JS权威指南学习总结-第六章 ,(有句话:一切都是对象) 2.什么面向对象 使用对象时,只关注对象提供的功能,不关注其内部细节,比如jQuery.面向对象是一种通用思想,并 ...
- js中的面向对象入门
什么是对象 我们先来看高程三中是如何对对象进行定义的 "无序属性的集合,其属性可以包括基本值.对象或者函数",对象是一组没有特定顺序的的值.对象的没个属性或方法都有一个俄名字,每个 ...
- 深入解读 Js 中的面向对象编程
前言:今天看了一篇文章觉得很不错,所以给大家分享一下,也许很多人都看过面向对象编程甚至写过这样博客,觉得面向对象编程就那样,没啥好说的,那可能是因为你对这方面知识已经了解,可以选择性跳过.那如果有更通 ...
- js中的面向对象程序设计
面向对象的语言有一个标志,即拥有类的概念,抽象实例对象的公共属性与方法,基于类可以创建任意多个实例对象,一般具有封装.继承.多态的特性!但JS中对象与纯面向对象语言中的对象是不同的,ECMA标准定义J ...
- 轻松理解JS中的面向对象,顺便搞懂prototype和__proto__
这篇文章主要讲一下JS中面向对象以及 __proto__,ptototype和construcator,这几个概念都是相关的,所以一起讲了. 在讲这个之前我们先来说说类,了解面向对象的朋友应该都知道, ...
- 轻松理解JS中的面向对象,顺便搞懂prototype和__proto__的原理介绍
这篇文章主要讲一下JS中面向对象以及 __proto__,ptototype和construcator,这几个概念都是相关的,所以一起讲了. 在讲这个之前我们先来说说类,了解面向对象的朋友应该都知道, ...
随机推荐
- 手游服务端框架之GM金手指的设计
玩过单机游戏的朋友,应该对金山游侠这个软件很熟悉把.当初我经常嫌刷怪升级非常辛苦,很多时候都是直接用金山游侠来修改游戏的经验或者等级内存,直接把角色调得很牛逼. 游戏开发也非常需要这些可以修改玩家数据 ...
- MPAndroidChart Wiki(译文)~Part 2
7. 填充数据 这一章节将讲解给各式各样的图表设置数据的方法. 7.1 LineChart(线形图) 想给图表添加数据,使用如下方法: public void setData(ChartData da ...
- 【排序】希尔排序,C++实现
原创博文,转载请注明出处! 本文代码的github地址 # 基本思路 希尔排序是”直接插入排序“的改进版,也称为“缩小增量排序”.基本原理:先将待排序的数组元素分成多个序列,然后对每个子序 ...
- day5 io模型
五种概览:http://www.cnblogs.com/xiehongfeng100/p/4763225.html http://sukai.me/linux-five-io-models/ 内有多 ...
- 升级到XE10
下午抽空从XE7升级到XE10,用的是lsuper大侠的Dx10Update1_23.0.21418.4207,用到的控件基本装全乎了. 过程中也碰到点问题,记录下子. 1. cnPack结构匹配线与 ...
- 使用jenkins持续集成自动化测试
本文采用Springboot开发一个简易的添加个人资料和查询个人资料接口,并采用testng进行测试,使用jenkis进行持续继承,allure输出测试报告. 个人资料查询接口开发(集成H2数据库) ...
- HDU - 6172:Array Challenge (BM线性递推)
题意:给出,三个函数,h,b,a,然后T次询问,每次给出n,求sqrt(an); 思路:不会推,但是感觉a应该是线性的,这个时候我们就可以用BM线性递推,自己求出前几项,然后放到模板里,就可以求了. ...
- stm32寄存器版学习笔记09 IIC
I²C(Inter-Integrated Circuit)总线是一种两线式串行总线,用于连接微控制器及其外设,是由数据线SDA和时钟SCL构成的串行总线,可发送和接收数据. IIC总线在传送数据过程中 ...
- 51nod 1347 旋转字符串
S[0...n-1]是一个长度为n的字符串,定义旋转函数Left(S)=S[1…n-1]+S[0].比如S=”abcd”,Left(S)=”bcda”.一个串是对串当且仅当这个串长度为偶数,前半段和后 ...
- 在VS2013创建WebService并在IIS中发布和使用
创建WebService 第一步:打开VS2013,新建空项目,注意选择.NET Framework的版本.这里我选择的是.NET Framework 4 新建好项目后,在项目中添加一个WebServ ...