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 ...
随机推荐
- 跨域问题 - Nginx反向代理
Nginx反向代理的思路,就是通过Nginx解析URL地址的时候进行判断,将请求转发的具体的服务器上. 解决思路 跨域问题,是由于JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象. ...
- @loj - 3043@「ZJOI2019」线段树
目录 @description@ @solution@ @accepted code@ @details@ @description@ 九条可怜是一个喜欢数据结构的女孩子,在常见的数据结构中,可怜最喜 ...
- @codeforces - 506C@ Mr. Kitayuta vs. Bamboos
目录 @description@ @solution@ @accepted code@ @details@ @description@ n 个竹子,第 i 个竹子初始高度 hi,在每天结束时将长高 a ...
- python中的常用BIF
BIF:就是python的内置函数,为了方便程序员的! 1.input()输入 在这里,只讲python3,因为python2到python3有不小的变化 通俗的解释就是你在控制台不管输入什么东西,都 ...
- excel 如何制作带下拉框的动态折线图表
首先我们需要有个类似下图产品销量的基础数据表. 首先将光标放入表格中任意位置,然后插入一个不带点标记的折线图,然后将折线的颜色设置为灰色. 第一次设置成灰色后,一定善用f4快捷键进行快速的折线颜色设置 ...
- Django自定义500的错误显示信息
这个方法应该对Django version 2.2.4以后的版本都有效,因为我的项目是这个版本,其他版本我并没有测试. 首先找到Django的exception.py文件路径: C:\python_ ...
- Python format格式化函数
参考资料:https://www.runoob.com/python/att-string-format.html 在学习Python的时候碰到了一个很有趣的格式化输入的技巧,下面记录在此. Pyth ...
- v-if和v-show的使用和特点
v-if的特点是每次都会重新删除或创建操作 v-show的特点是每次不会进行DOM的删除和创建操作,只是切换了元素的display:none样式 <div id="app"& ...
- mybatis视频教程2-动态参数
/MyBatis_04_DynamicSQL/src/com/atguigu/mybatis/dao/EmployeeMapperDynamicSQL.java package com.atguigu ...
- 【Spring】AOP的代理默认是Jdk还是Cglib?
菜瓜:你觉得AOP是啥 水稻:我觉得吧,AOP是对OOP的补充.通常情况下,OOP代码专注功能的实现,所谓面向切面编程,大多数时候是对某一类对象的方法或者功能进行增强或者抽象 菜瓜:我看你这个理解就挺 ...