js中的面向对象(一)封装
1.简单的封装(定义)
var cat1 = {};
cat1.name = '阿黄';
cat1.sex = '男';
cat1.age = 11;
//cat2也同样具有三个属性
var cat2 = {};
cat2.name = '小黑';
cat2.sex = '女';
cat2.age = '10';
把cat1和cat2看成是一个对象,ta们都具有三个属性。
缺点:一时如果有多个对象,写起来就比较麻烦,二是实例和原型之间没有任何联系;
2.原始模型封装(在1的基础上进行改进)
function Cat(name,sex,age){
return {
name:name,
sex:sex,
age:age
}
}
var cat1 = Cat('小黄','男','11');
var cat2 = Cat('小黑','女','10');
alert(cat1.name);
缺点:cat1和cat2没有什么内在联系,不能反应他们是同一原型对象的实例
3.构造函数的封装
function Cat(name,age,sex){
this.name = name;
this.sex = sex;
this.age = age;
}
var cat1 = new Cat('小黄','男','11');
var cat2 = new Cat('小黑','女','10');
表面上是没有什么缺点,但是如以下代码
function Cat(name,age,sex){
this.name = name;
this.sex = sex;
this.age = age;
this.type = '猫科动物';
}
var cat1 = new Cat('小黄','男','11');
var cat2 = new Cat('小黑','女','10');
cat1和cat2都是属于猫科动物,但是在创建对象原型Cat的实例cat1和cat2时都会创建一次type属性;这样就会造成内存的浪费。
4.prototype模式
function Cat(name,sex,age){
this.name = name;
this.sex = sex;
this.age = age;
}
Cat.prototype.type = '猫科动物';
Cat.prototype.say = function (){alert("喵喵");};
var cat1 = new Cat();
alert(cat1.type);
原理:Javascript规定,每一个构造函数都有一个prototype属性,指向另一个对象。这个对象的所有属性和方法,都会被构造函数的实例继承。
个人理解是将相同的属性“放在”一个内存之中,当创建cat1和cat2实例时,他们的属性都会指向同一个内存,从而不用重复创建。
prototype验证
1)isPrototypeOf
2)hasOwnProperty
3)in
本文参考
js中的面向对象(一)封装的更多相关文章
- 前端 ---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压盖大盒子,将小盒子的下边框去掉,就可以 ...
- Day046--JavaScript-- DOM操作, js中的面向对象, 定时
一. DOM的操作(创建,追加,删除) parentNode 获取父级标签 nextElementSibling 获取下一个兄弟节点 children 获取所有的子标签 <!DOCTYPEhtm ...
- 《JS中的面向对象技术》
内容要点: 1.什么是对象:JS权威指南学习总结-第六章 ,(有句话:一切都是对象) 2.什么面向对象 使用对象时,只关注对象提供的功能,不关注其内部细节,比如jQuery.面向对象是一种通用思想,并 ...
- js中的面向对象入门
什么是对象 我们先来看高程三中是如何对对象进行定义的 "无序属性的集合,其属性可以包括基本值.对象或者函数",对象是一组没有特定顺序的的值.对象的没个属性或方法都有一个俄名字,每个 ...
- JS中OOP之模拟封装和继承和this指向详解
大家好,今天我带大家学习一下js的OOP, 大家都知道,面向对象有三个基本特征,继承,封装和多态,面向对象的语言有那么几种,C++,PHP,JAVA等,而功能强大的JS可以模拟实现面向对象的两大特征, ...
- 深入解读 Js 中的面向对象编程
前言:今天看了一篇文章觉得很不错,所以给大家分享一下,也许很多人都看过面向对象编程甚至写过这样博客,觉得面向对象编程就那样,没啥好说的,那可能是因为你对这方面知识已经了解,可以选择性跳过.那如果有更通 ...
- js中的面向对象程序设计
面向对象的语言有一个标志,即拥有类的概念,抽象实例对象的公共属性与方法,基于类可以创建任意多个实例对象,一般具有封装.继承.多态的特性!但JS中对象与纯面向对象语言中的对象是不同的,ECMA标准定义J ...
- js中的面向对象--类似于类的概念
创建对象的几种常用方式 1.使用Object或对象字面量创建对象 2.工厂模式创建对象 3.构造函数模式创建对象 4.原型模式创建对象 1.使用Object或对象字面量创建对象 使用object va ...
随机推荐
- Android高亮TextView
HighlightTextView Android文本高亮控件,基于View实现. 特点 文本高亮 单词自动换行 高亮词组保持在同一行显示 截图 Demo Java: public class Mai ...
- OpenCv:椭圆上点的计算方程
椭圆 椭圆(Ellipse)是平面内到定点F1.F2的距离之和等于常数(大于|F1F2|)的动点P的轨迹,F1.F2称为椭圆的两个焦点.其数学表达式为: ...
- css3基础篇二
CSS3 边框 border-radius box-shadow border-image(ie不支持) 语法 border-radius: 1-4 length|% / 1-4 length|%; ...
- (转) OpenLayers3基础教程——OL3 介绍control
http://blog.csdn.net/gisshixisheng/article/details/46761535 概述: 本文讲述的是Ol3中的control的介绍和应用. OL2和OL3 co ...
- jQuery实现菜单全选/不选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- linux下怎么退出telnet
在运维过程中,常常会telnet某个ip端口,如果 能telnet通,怎么退出呢 ? 1.telnet 63.172.25.18 6463 回车 Trying 63.172.25.18... Conn ...
- PAT_A1110#Complete Binary Tree
Source: PAT A1110 Complete Binary Tree (25 分) Description: Given a tree, you are supposed to tell if ...
- ActionChains定位元素
ActionChains UI自动化测试过程中,经常遇到那种,需要鼠标悬浮后,要操作的才会元素出现的这种场景,那么我们就要模拟鼠标悬浮到某一个位置,做一系列的连贯操作,Selenium给我们提供了Ac ...
- (C/C++学习)1.C++中vector的使用
说明:vector是C++中一个非常方便的容器类,它用于存放类型相同的元素,利用成员函数及相关函数可以方便的对元素进行增加或删除,排序或逆序等等,下面将对这些功能一一叙述. 一.vector的第一种用 ...
- 突如其来的“中断异常”,我(Java)该如何处理?
3.try-catch块 try语句块中代码执行时发生三种情况: try语句块中代码正常执行完毕,没有任何异常,那么catch语句块的代码将不会被执行. import java.util.*; pub ...