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 ...
随机推荐
- 函数式编程-将Monad(单子)融入Swift
前言 近期又开始折腾起Haskell,掉进这个深坑恐怕很难再爬上来了.在不断深入了解Haskell的各种概念以及使用它们去解决实际问题的时候,我会试想着将这些概念移植到Swift中.函数式编程范式的很 ...
- BRAFT EDITOR富文本编辑器
https://braft.margox.cn/demos/basic 官方文档 import React from 'react' import Uploading from '../Upl ...
- 微信小程序 PDF下载打印
在开发微信小程序时,需要打印生成的PDF,实现思路是:后端生成相应的PDF,微信小程序下载并打开. 但是微信小程序并不可以打印,所以需要借助其他APP比如:WPS,但是发现微信小程序down的PDF在 ...
- esp32(M5STACK)程序烧写(Ubuntu)
由于我们的开发环境在Ubuntu上,所以介绍一下如何在Ubuntu上烧写esp32的程序 首先下载esptools pip install esptool 擦除 sudo es ...
- 【Leetcode】【简单】【14最长公共前缀】【JavaScript】
题目 14. 最长公共前缀 编写一个函数来查找字符串数组中的最长公共前缀. 如果不存在公共前缀,返回空字符串 "". 示例 1: 输入: ["flower",& ...
- POJ 3126 Prime Path (BFS + 素数筛)
链接 : Here! 思路 : 素数表 + BFS, 对于每个数字来说, 有四个替换位置, 每个替换位置有10种方案(对于最高位只有9种), 因此直接用 BFS 搜索目标状态即可. 搜索的空间也不大. ...
- Oracle笔记 多表查询
Oracle笔记 多表查询 本次预计讲解的知识点 1. 多表查询的操作.限制.笛卡尔积的问题: 2. 统计函数及分组统计的操作: 3. 子查询的操作,并且结合限定查询.数据排序.多表查询.统计查 ...
- 《你又怎么了我错了行了吧》第八次团队作业:Alpha冲刺
项目 内容 这个作业属于哪个课程 软件工程 这个作业的要求在哪里 实验十二 团队作业8 团队名称 你又怎么了我错了行了吧 作业学习目标 (1)掌握软件测试基础技术 (2)学习迭代式增量软件开发过程,完 ...
- .net 单元测试
都说测试驱动开发,但是想写好单元测试其实不容易,不是因为测试用例难以构造,而是因为很多时候方法非常复杂 其中部分测试想要完成就十分费力,其中让人崩溃的地方主要如下: 实例私有函数 实例静态私有函数 十 ...
- cxgrid的过滤%x%问题【备查】
把这个文件复制到你的程序目录\DevExpress VCL\ExpressDataController\Sources\cxLike.pas function LikeStr(const AStr, ...