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,这几个概念都是相关的,所以一起讲了. 在讲这个之前我们先来说说类,了解面向对象的朋友应该都知道, ...
随机推荐
- 最好PHP开发工具Zend Studio 9.0.2的安装和使用
摘要:Zend Studio是Zend Technologies开发的PHP语言集成开发环境(IDE),是公认最好的PHP开发工具.在5.5系列后,官方推出的Zend Studio都利用了Eclips ...
- MapWindowPoints
中文名 MapWindowPoints Windows CE 1.0及以上版本 头文件 winuser.h 库文件 user32.lib MapWindowPoints函数把相对于一个窗口的坐标空间的 ...
- hbase安装配置
环境准备 Java HDFS zookeeper SSH,NTP时间同步 系统调优,这个可以等安装完后改,文件打开数(ulimit和nproc) 修改Hadoop HDFS Datanode同时处理文 ...
- 2016.7.12 eclipse和IDEA中mybatis generator插件的安装与使用
Eclipse中的安装 http://jingyan.baidu.com/article/9faa7231506ed8473c28cbee.html 1.下载插件 2.将插件generator的fea ...
- 控制面板的cpl程序列表
控制面板的cpl程序列表 学习了:https://zhidao.baidu.com/question/2141898537654796628.html 最近用来sysdm.cpl: 辅助功能选项:ac ...
- 计算机网络漫谈:OSI七层模型与TCP/IP四层(参考)模型
提纲.png 一.七层?四层? OSI模型(Open System Interconnection Reference Model,缩写为OSI),全名“开放式系统互联通信参考模型”,是一个试图使各种 ...
- HTML5 Canvas 八星聚义动态效果
昔有石碣村七星聚义,今有Canvas八星聚义.动态效果是,八颗星以等速螺线慢慢向中心聚集,最后汇聚成一颗. 效果: 代码: <!DOCTYPE html> <html lang=&q ...
- Python获取免费的可用代理
Python获取免费的可用代理 在使用爬虫多次爬取同一站点时,常常会被站点的ip反爬虫机制给禁掉,这时就能够通过使用代理来解决.眼下网上有非常多提供最新免费代理列表的站点.这些列表里非常多的代理主机是 ...
- 可软件定义的存储逻辑——Efficient and agile storage management in software defined environments
note:写这个或许算是翻译,又或算是对这个论文[1]的理解,又或者仅仅是我的看法. 这篇论文和IOFlow相比較,更加注重软件定义存储的框架(利用已有的框架来创建新的 ...
- 数据结构基础-Hash Table详解(转)
理解Hash 哈希表(hash table)是从一个集合A到另一个集合B的映射(mapping). 映射是一种对应关系,而且集合A的某个元素只能对应集合B中的一个元素.但反过来,集合B中的一个元素可能 ...