八. 批量创建对象

使用工厂方法创建对象

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();

构造函数的执行流程:

  1. 立即创建一个新的对象
  2. 将新建的对象设置为函数中的this,在构造函数中可以使用this来引用新建的对象
  3. 逐行执行函数中的代码
  4. 将新建对象作为返回值返回
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学习 Ⅳ的更多相关文章

  1. JavaScript学习(一) —— 环境搭建与JavaScript初探

    1.开发环境搭建 本系列教程的开发工具,我们采用HBuilder. 可以去网上下载最新的版本,然后解压一下就能直接用了.学习JavaScript,环境搭建是非常简单的,或者说,只要你有一个浏览器,一个 ...

  2. Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”

    Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...

  3. JavaScript学习(3):函数式编程

    在这篇文章里,我们讨论函数式编程. 什么是函数式编程?根据百度百科的描述,“函数式编程是种编程典范,它将电脑运算视为函数的计算.函数编程语言最重要的基础是 λ 演算(lambda calculus). ...

  4. JavaScript学习(2):对象、集合以及错误处理

    在这篇文章里,我们讨论一下JavaScript中的对象.数组以及错误处理. 1. 对象 对象是JavaScript中的一种基本类型,它内部包含一些属性,我们可以对这些属性进行增删操作. 1.1 属性 ...

  5. JavaScript学习13 JavaScript中的继承

    JavaScript学习13 JavaScript中的继承 继承第一种方式:对象冒充 <script type="text/javascript"> //继承第一种方式 ...

  6. JavaScript学习12 JS中定义对象的几种方式

    JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工 ...

  7. JavaScript学习11 数组排序实例

    JavaScript学习11 数组排序实例 数组声明 关于数组对象的声明,以前说过:http://www.cnblogs.com/mengdd/p/3680649.html 数组声明的一种方式: va ...

  8. JavaScript学习10 JS数据类型、强制类型转换和对象属性

    JavaScript学习10 JS数据类型.强制类型转换和对象属性 JavaScript数据类型 JavaScript中有五种原始数据类型:Undefined.Null.Boolean.Number以 ...

  9. JavaScript学习09 函数本质及Function对象深入探索

    JavaScript学习09 函数本质及Function对象深入探索 在JavaScript中,函数function就是对象. JS中没有方法重载 在JavaScript中,没有方法(函数)重载的概念 ...

  10. JavaScript学习08 Cookie对象

    JavaScript学习08 Cookie对象 JavaScript Cookie Cookie对象: Cookie是一种以文件的形式保存在客户端硬盘的Cookies文件夹中的用户数据信息(Cooki ...

随机推荐

  1. CSS3弹性布局内容对齐(justify-content)属性使用详解

    内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐. 该操作发生在弹性长度以及自动边距被确定后. 它用来在存在剩余空间时如何加以分配 ...

  2. Django 源码阅读笔记(基础视图)

    django源码解读之 View View. ContextMixin.TemplateResponseMixin.TemplateView.RedirectView View class View( ...

  3. 浅淡i.MX8M Mini处理器的效能以及平台对比

    i.MX 8M Mini是恩智浦首款嵌入式多核应用处理器,定位在任何通用工业和物联网的应用,是一款针对边缘计算应用的芯片,也是恩智普i.MX系列中第一个加了机器学习核的产品线.这颗芯片采用先进的14L ...

  4. 团队Github实践训练

    这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 团队名称 WeChair 这个作业要求在哪里 团队Github实践训练 这个作业的目标 通过github实现团队协作编码 作业正 ...

  5. new jup在新一代中存在

    1.灰度发布服务动态路由 动态配置路由规则,实现对调用流量的精确控制.可配置基于版本.IP.自定义标签等复杂的规则.2.服务鉴权示例2需求:服务 provider-demo 只允许来自 consume ...

  6. 黎活明8天快速掌握android视频教程--20_采用ContentProvider对外共享数据

    1.内容提供者是让当前的app的数据可以让其他应用访问,其他应该可以通过内容提供者访问当前app的数据库 contentProvider的主要目的是提供一个开发的接口,让其他的应该能够访问当前应用的数 ...

  7. python高阶-Linux基础命令集

    声明: 1)仅作为个人学习,如有冒犯,告知速删! 2)不想误导,如有错误,不吝指教! 1: 查看文件信息:ls ls常用参数: 参数 含义 -a 显示指定目录下所有子目录与文件,包括隐藏文件 -l 以 ...

  8. ubuntu添加新的分辨率选项(干货)

    ubuntu默认可选的分辨率不能够满足我的需求,在这里记录增加1440*900分辨率的过程 1. 终端输入: cvt 1440 900 2. 修改配置文件: vim /etc/profile xran ...

  9. 语言模型 N-gram 与其平滑方法推导

    N-gram N-gram 作为一个名词表示的是一个给定文本/音频样本中有n项(音素,音节,字母,单词)的一个连续序列. 数学表达 N-gram 模型表示的是当前这个 word \(w_i\) 依赖于 ...

  10. vue全家桶(2.1)

    3.路由切换 3.1.vue-router路由切换 3.1.1.什么是前端路由 路由这个概念最先是后端出现的,发送不同的请求,后端根据请求的不同返回不同的资源,这个时候的url是和后端交互的,需要在后 ...