JS 中的面向对象
创建对象的集中常见方式
1 . 使用 Object 或 对象字面量创建对象
2 . 工厂模式创建对象
3 . 构造函数模式创建对象
4 . 原型模式创建对象
1 . 使用 Object 或 对象字面量创建对象
JS 中基本创建对象的方式 :
var student = new Object();
student.name = "Tom";
student.age = 18;
student.fav = function(){
alert(this.name);
}
student.fav();
使用 字面量方式创建对象 :
var student = {
name:"91赵先生",
age:18,
fav:function(){
alert(this.name)
}
};
student.fav();
但是有个问题,当我们要创建同类的student1 , student2 .......,代码会重复.所以就有了工厂模式
2 . 工厂模式创建对象
JS中没有类的概念,那么我们就使用一种函数将以上对象创建过程封装起来,以便于重复使用,同时给出特定出口来初始化对象.
function createStudent(name,age){
var obj = new Object();
obj.name = name;
obj.age = age;
return name;
}
var student1 = createStudent("Tom",18);
var student2 = createStudent("firskt",19)
console.log(student1);
console.log(student2);
但是这个也有问题就是不知道出来的数据是哪个类型的.
比如说我们有定义了个"水果的类型" creatFruit()函数 :
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类型
function createPerson(){
var person = new Object();
person.name = 'Tom';
person.age = 18;
person.fav = function() {
alert(this.name);
}
return person;
}
function createFruit(){
var fruit = new Object();
fruit.name = 'Tom';
fruit.age = 18;
fruit.fav = function() {
alert(this.name);
}
return fruit;
}
var p1 = createPerson();
var f1 = createFruit();
console.log(p1 instanceof Object);
console.log(f1 instanceof Object);
// true true 结果
3 . 构造函数模式创建对象
function Person(name,age) {
this.name = name;
this.age = age;
this.fav = function() {
alert(this.name);
}
}
function Fruit(name,age) {
this.name = name;
this.age = age;
this.fav = function() {
alert(this.name);
}
}
var p1 = new Person('firster',17);
var f1 = new Fruit("Tom",19);
console.log(p1 instanceof Object);
console.log(f1 instanceof Object);
console.log(p1 instanceof Person);
console.log(f1 instanceof Fruit);
4 . 原型模式创建对象
function Student() {
this.name = 'easy';
this.age = 20;
}
// Student.prototype 是Student的父类
// 原型指 prototype
Student.prototype.alertName = function(){
//this 指 student
alert(this.name);
};
var stu1 = new Student();
var stu2 = new Student();
stu1.alertName(); //easy
stu2.alertName(); //easy
alert(stu1.alertName == stu2.alertName); //true 二者共享同一函数
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,这几个概念都是相关的,所以一起讲了. 在讲这个之前我们先来说说类,了解面向对象的朋友应该都知道, ...
随机推荐
- Cannot create JDBC driver of class '' for connect URL 'null'问题解决方法2
1)启动Tomcat服务器,打开浏览器,输入http://localhost:8080/admin(其中localhost是名称服务器或称为主机),进入管理界面的登陆页面,这时候请输入原来安装时要求输 ...
- linux下ftp、telnet的安装和使用
1.ftp的安装和使用 一般在各种linux的发行版中,默认带有的ftp软件是vsftp. 使用如下命令#rpm -qa | grep vsftpd可以检测出是否安装了vsftpd软件,如果没有安装, ...
- 终于会用c#中的delegate(委托)和event(事件)了 [转]
原文 : http://www.cnblogs.com/zhangchenliang/archive/2012/09/19/2694430.html 一.开篇忏悔 对自己最拿手的编程语言C#,我想对你 ...
- 【Salvation】——怪物角色动画&主角碰撞死亡动画
写在前面:这个动画功能同样也是使用JavaScript编写脚本,在Unity3D游戏引擎的环境中实现,在怪物的角色动画中,很多与人物相同,这里不再重复. 一.设计敌人 拖一个精英sprite到层次面板 ...
- Linux命令之basename 命令
用途 返回一个字符串参数的基本文件名称. 语法 basename String [ Suffix ] 描述 basename 命令读取 String 参数,删除以 /(斜杠) 结尾的前缀以及任 ...
- HTML border CSS输出三角形
有以下一段html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- shell程序
例一:helloworld #!/bin/sh -x message="hello" read name echo "$message ,$name" 例二:选 ...
- Redhat Crash Utility-Ramdump
Redhat Crash Utility edit by liaoye@2014/9/16 http://blog.csdn.net/paul_liao Crash utility是redhat提供的 ...
- OpenTSDB设计解读
OpenTSDB是基于HBase存储时间序列数据的一个开源数据库,确切地说,它仅仅是一个HBase的应用而已,其对于时间序列数据的处理能够供其它系统參考和借鉴.本文会针对它在数据库的设计方面展开一些探 ...
- 指定UIView的某几个角为圆角
如果需要将UIView的四个角全部设置为圆角,做法相当简单,只需要设置其layer的cornerRadius属性即可.而若要指定某几个角(小于4)为圆角,而别的角不变的时候,这种方法就不好用了.这种情 ...