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 ...
随机推荐
- SpringBoot整合分布式ZooKeeper和Dubbo
ZooKeeper ZooKeeper是一个分布式的,开放远吗的分布式应用程序协调服务.它是一个为分布式应用提供一致性服务的软件,提供的功能包括:配置维护.域名服务.分布式同步.组服务等. 服务提供者 ...
- fiddler修改请求参数
1.打开fiddler ,点击界面左侧左侧底部 2.此图标为before request请求(修改请求参数时,设置这个,可以修改请求参数) 3..再次点击该按钮,将图标切换到下图after respo ...
- .Net Core微服务入门全纪录(六)——EventBus-事件总线
前言 上一篇[.Net Core微服务入门全纪录(五)--Ocelot-API网关(下)]中已经完成了Ocelot + Consul的搭建,这一篇简单说一下EventBus. EventBus-事件总 ...
- Spring Boot入门系列(十五)Spring Boot 开发环境热部署
在实际的项目开发过中,当我们修改了某个java类文件时,需要手动重新编译.然后重新启动程序的,整个过程比较麻烦,特别是项目启动慢的时候,更是影响开发效率.其实Spring Boot的项目碰到这种情况, ...
- 有趣的条漫版 HashMap,25岁大爷都能看懂
我是风筝,公众号「古时的风筝」,一个兼具深度与广度的程序员鼓励师,一个本打算写诗却写起了代码的田园码农! 文章会收录在 JavaNewBee 中,更有 Java 后端知识图谱,从小白到大牛要走的路都在 ...
- js银行卡四个数字一个空格
!function () { document.getElementById('bankCard').onkeyup = function (event) { var v = this.value; ...
- v-forv-for指令的三种使用方法
1.迭代数组 <p v-for="(item,i) in list">id:{{item.id}}---名字:{{item.name}}---索引{{item.age} ...
- 利用c++中的设计灵感,既要学BIM分类信息表,借助GIS完成环境搭建改善
我,一个平平无奇的城市规划专业(建筑专业.路桥专业)大学生,还有一年要毕业,很担心工作以后受到社会的毒打,遂问导师和学长,我要自学点什么技能和软件? 学长A:CAD,SketchUp,PS我都很熟练了 ...
- java基础-java与c#接口不同点
1.接口中定义成员 C#,如图我在接口ITest添加了一个字段n,那么vs直接就显示红色的底线,而错误就是接口不能包含字段 java,如下图,编译也是报错但是并不是接口中不能包含而是缺少赋值,那么我们 ...
- python在循环中追加字典
1. 在循环中用append增加key值,最终生成全是key值的list: 2. 在循环中用append增加value值,最终生成全是value值的list: 3. 最后用zip将两个list合并成一 ...