JavaScript学习 Ⅳ
八. 批量创建对象
使用工厂方法创建对象
function creatPerson(name, age, gender='男'){
var obj = new Object();
obj.name = name;
obj.age = age;
obj.gender = gender;
obj.sayName = function(){
alert(this.name);
};
return obj;
}
使用工厂方法创建的对象,使用的构造函数都是Object,所以创建的对象都是Object类型,导致我们无法区分不同类型。
构造函数
为了使所创建的对象可以区分其类型,可以创建一个构造函数,专门用来创建该类对象。
构造函数就是一个普通的函数,创建方式和普通函数没有区别,不同的是构造函数习惯上首字母大写。
构造函数与普通函数的区别就是调用方式不同:
// 普通函数调用
fun();
// 构造函数调用
new fun();
构造函数的执行流程:
- 立即创建一个新的对象
- 将新建的对象设置为函数中的
this,在构造函数中可以使用this来引用新建的对象 - 逐行执行函数中的代码
- 将新建对象作为返回值返回
function Person(name, age, gender){
this.name = name;
this.age = age;
this.gender = gender;
this.sayName = function(){
alert(this.name);
};
}
使用同一个构造函数创建的对象,我们称为一类对象,也将一个构造函数称为一个类。
使用 instanceof 可以检查一个对象是否是一个类的实例
console.log(per instanceof Person);
上面的代码所创建的实例中都有 sayName 方法,这样就导致创建1000个实例就会创建1000个方法,而1000个方法都是一摸一样的。这样完全没有必要,完全可以使所有对象共享同一个方法。
方法一:
function Person(name, age, gender){
this.name = name;
this.age = age;
this.gender = gender;
this.sayName = fun;
}
function fun(){
alert(this.name);
}
将函数定义在全局作用域,污染了全局作用域的命名空间,而且定义在全局作用域中也很不安全。
原型 prototype
每一个javascript对象(除null外)创建的时候,就会与之关联另一个对象,这个对象就是我们所说的原型,每一个对象都会从原型中“继承”属性。
function Person(){}
function MyClass(){}
console.log(MyClass.prototype == Person.prototype)
// 不同函数原型不同
如果函数作为普通函数调用 prototype 没有任何作用
当函数以构造函数形式调用时,它所创建的对象中都会有一个隐含属性(__proto__),指向该构造函数的原型对象。
原型对象相当于一个公共区域,所有同一个类的实例都可以访问这个原型对象,我们可以将对象中共有的内容,统一设置到原型对象中。
当访问对象的一个属性或者方法时,它会先在对象自身种寻找,如果有则直接使用。
// 向原型中添加属性
MyClass.prototype.a = 123;
// 向原型中添加方法
Myclass.prototype.sayHello = function(){
alert('hello');
};
将所有对象共有的变量和方法,可以添加入原型。
原型中的变量和方法,类似于Java中的静态变量和静态方法。可以被替换,不可被重写。
如果原型中含有某个属性时,使用in运算符查询,也会返回true
可以使用对象的hasOwnProperty,来检查对象自身中是否含有该属性。
原型对象也是对象,存在原型对象的原型。当我们使用一个对象的属性或方法时,会先在自身中寻找,如果自身中有,则直接使用,如果自身没有,则去原型对象中寻找,如果原型对象中没有,则到原型对象的原型中寻找,直到找到Object对象的原型。Object对象的原型没有原型。
当我们直接在页面中打印一个对象时,实际上是输出对象的toString()方法的返回值。
可以对方法进行重写。
垃圾回收(GC)
程序运行的过程中,会产生垃圾导致程序运行速度过慢,我们需要一个垃圾回收机制,来处理程序运行过程中的垃圾。
当一个对象没有任何的变量或属性对它进行引用,此时我们将永远无法操作该对象,这个对象就是一个垃圾,这种对象过多会占用大量内存空间,导致程序运行变慢。
JS中拥有自动的垃圾回收机制,会自动的将这些垃圾对象从内存中销毁。
我们只需要将不再使用的对象设置为null
九. 对象类型
内建对象
数组(Array):
- 数组也是一个对象
- 和普通对象功能相似,也是用来存储一些值的
- 普通对象使用字符串作为属性名,而数组使用数字作为索引操作元素
var arr = new Array();
arr[0] = 10;
arr[1] = 33;
var arr = [1,2,3,4,5]; // 使用字面量创建数组
使用length属性可以修改或读取数组的长度,数组长度≠数组元素个数。
arr[arr.length] = 10; // 数据结尾添加新元素
var arr2 = new Array(10,20,30); // 使用构造函数
arr = [10]; // 创建只有一个元素的数组
arr2 = new Array(10); // 创建长度为10的数组
数组中的元素可以是任意数据类型,也可以是对象(函数)。
数组的方法
| 方法 | 描述 |
|---|---|
| concat() | 连接两个或更多的数组,并返回结果。 |
| join() | 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 |
| pop() | 删除并返回数组的最后一个元素 |
| push() | 向数组的末尾添加一个或更多元素,并返回新的长度。 |
| reverse() | 颠倒数组中元素的顺序。 |
| shift() | 删除并返回数组的第一个元素 |
| slice() | 从某个已有的数组返回选定的元素。(start, end) |
| sort() | 对数组的元素进行排序 |
| splice() | 删除元素,并向数组添加新元素。 |
| toSource() | 返回该对象的源代码。 |
| toString() | 把数组转换为字符串,并返回结果。 |
| toLocaleString() | 把数组转换为本地数组,并返回结果。 |
| unshift() | 向数组的开头添加一个或更多元素,并返回新的长度。 |
| valueOf() | 返回数组对象的原始值 |
join():该方法可以将数组转换为一个字符串,不会对原数组产生影响。传入参数为连接符。
sort():将数组进行排序,会改变原数组,默认按照Unicode进行排序。
对于纯数字的数组,依旧使用Unicode进行排序,可能得到错误的结果。
我们可以自己指定规则:
在sort()中添加一个回调函数,来指定排序规则,回调函数需要两个形参,浏览器将会分别使用数组中的元素作为实参去调用回调函数;
使用哪个元素是不确定的,但是可以肯定第一个参数在第二个参数之前;
浏览器会根据返回值来决定元素的顺序,如果返回一个大于0的值,则元素会交换位置,如果放回一个小于0的值,则位置不变。
arr = [5,4,2,1,3,6,7,8]
arr.sort(function(a, b){
if(a > b){
return 1;
}else if(a < b){
return -1;
}elseP{
return 0;
}
});
return a - b; // 升序排列
return b - a; // 降序排列
forEach
forEach()方法需要一个函数作为参数:
- 像这种函数,由我们创建但是不由我们调用的,我们称为回调函数
- 数组中有几个元素,函数就会执行几次。每次执行时,浏览器会将遍历到的元素以实参的形式传递进来
- 浏览器会在回调函数中传递三个参数:currentValue、index、arr
function Person(name, age){
this.name = name;
this.age = age;
}
var per = new Person('孙悟空', 18);
var per1 = new Person('猪八戒', 28);
var per2 = new Person('沙和尚', 38);
var per3 = new Person('二郎神', 8);
var per4 = new Person('美猴王', 68);
var perArr = [per, per1, per2, per3, per4];
function sayHello(value, index, arr){
console.log(value.name+':Hello!');
}
perArr.forEach(sayHello);
splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。
注释:该方法会改变原始数组。
arrayObject.splice(index,howmany,item1,.....,itemX)
可以用于插入,删除,替换。
JavaScript学习 Ⅳ的更多相关文章
- JavaScript学习(一) —— 环境搭建与JavaScript初探
1.开发环境搭建 本系列教程的开发工具,我们采用HBuilder. 可以去网上下载最新的版本,然后解压一下就能直接用了.学习JavaScript,环境搭建是非常简单的,或者说,只要你有一个浏览器,一个 ...
- Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”
Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...
- JavaScript学习(3):函数式编程
在这篇文章里,我们讨论函数式编程. 什么是函数式编程?根据百度百科的描述,“函数式编程是种编程典范,它将电脑运算视为函数的计算.函数编程语言最重要的基础是 λ 演算(lambda calculus). ...
- JavaScript学习(2):对象、集合以及错误处理
在这篇文章里,我们讨论一下JavaScript中的对象.数组以及错误处理. 1. 对象 对象是JavaScript中的一种基本类型,它内部包含一些属性,我们可以对这些属性进行增删操作. 1.1 属性 ...
- JavaScript学习13 JavaScript中的继承
JavaScript学习13 JavaScript中的继承 继承第一种方式:对象冒充 <script type="text/javascript"> //继承第一种方式 ...
- JavaScript学习12 JS中定义对象的几种方式
JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工 ...
- JavaScript学习11 数组排序实例
JavaScript学习11 数组排序实例 数组声明 关于数组对象的声明,以前说过:http://www.cnblogs.com/mengdd/p/3680649.html 数组声明的一种方式: va ...
- JavaScript学习10 JS数据类型、强制类型转换和对象属性
JavaScript学习10 JS数据类型.强制类型转换和对象属性 JavaScript数据类型 JavaScript中有五种原始数据类型:Undefined.Null.Boolean.Number以 ...
- JavaScript学习09 函数本质及Function对象深入探索
JavaScript学习09 函数本质及Function对象深入探索 在JavaScript中,函数function就是对象. JS中没有方法重载 在JavaScript中,没有方法(函数)重载的概念 ...
- JavaScript学习08 Cookie对象
JavaScript学习08 Cookie对象 JavaScript Cookie Cookie对象: Cookie是一种以文件的形式保存在客户端硬盘的Cookies文件夹中的用户数据信息(Cooki ...
随机推荐
- CSS3弹性布局内容对齐(justify-content)属性使用详解
内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐. 该操作发生在弹性长度以及自动边距被确定后. 它用来在存在剩余空间时如何加以分配 ...
- Django 源码阅读笔记(基础视图)
django源码解读之 View View. ContextMixin.TemplateResponseMixin.TemplateView.RedirectView View class View( ...
- 浅淡i.MX8M Mini处理器的效能以及平台对比
i.MX 8M Mini是恩智浦首款嵌入式多核应用处理器,定位在任何通用工业和物联网的应用,是一款针对边缘计算应用的芯片,也是恩智普i.MX系列中第一个加了机器学习核的产品线.这颗芯片采用先进的14L ...
- 团队Github实践训练
这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 团队名称 WeChair 这个作业要求在哪里 团队Github实践训练 这个作业的目标 通过github实现团队协作编码 作业正 ...
- new jup在新一代中存在
1.灰度发布服务动态路由 动态配置路由规则,实现对调用流量的精确控制.可配置基于版本.IP.自定义标签等复杂的规则.2.服务鉴权示例2需求:服务 provider-demo 只允许来自 consume ...
- 黎活明8天快速掌握android视频教程--20_采用ContentProvider对外共享数据
1.内容提供者是让当前的app的数据可以让其他应用访问,其他应该可以通过内容提供者访问当前app的数据库 contentProvider的主要目的是提供一个开发的接口,让其他的应该能够访问当前应用的数 ...
- python高阶-Linux基础命令集
声明: 1)仅作为个人学习,如有冒犯,告知速删! 2)不想误导,如有错误,不吝指教! 1: 查看文件信息:ls ls常用参数: 参数 含义 -a 显示指定目录下所有子目录与文件,包括隐藏文件 -l 以 ...
- ubuntu添加新的分辨率选项(干货)
ubuntu默认可选的分辨率不能够满足我的需求,在这里记录增加1440*900分辨率的过程 1. 终端输入: cvt 1440 900 2. 修改配置文件: vim /etc/profile xran ...
- 语言模型 N-gram 与其平滑方法推导
N-gram N-gram 作为一个名词表示的是一个给定文本/音频样本中有n项(音素,音节,字母,单词)的一个连续序列. 数学表达 N-gram 模型表示的是当前这个 word \(w_i\) 依赖于 ...
- vue全家桶(2.1)
3.路由切换 3.1.vue-router路由切换 3.1.1.什么是前端路由 路由这个概念最先是后端出现的,发送不同的请求,后端根据请求的不同返回不同的资源,这个时候的url是和后端交互的,需要在后 ...