进击的JavaScript小白(五)——对象

说我是单身狗的那人真逗,程序员谁还没个对象了,分分钟new一个,我还能new两个,呵,颤抖吧,凡人!

一、对象简介

1、对象的作用

用于同时保存多个数据

2、声明方式

var obj = new Object();
var obj = {}; 

3、对象的属性操作

① 属性:对象中保存的数据,统称为属性
② 方法:方法实际上也是属性,由于内部保存的是函数值,所以称为方法
③ 对象.属性名:当使用对象属性时可以确定当前要访问的属性名是什么
④ 对象[‘属性名’]:不确定本次要访问的属性名称,就可以使用[]的访问方式
⑤ 对象属性的初始化设置方式

		var obj = {
			name : 'jack',
			age : 18,
			sayHi : function () {
				console.log('这是sayHi的代码');
			},
			sayHehe : function () {
				console.log('这是sayHehe的代码');
			}
		};
		console.log(obj.name, obj['age']);
		obj.xingBie = '男';

二、对象创建操作

1、通过Object构造函数创建单个对象

var obj = new Object();

2、工厂模式

		// 使用函数进行多个对象创建操作(工厂模式)
		function createStu (name, age) {
			// 1 创建了对象
			var stu1 = new Object();
			// 2 给对象添加功能
			stu1.name = name;
			stu1.age = age;
			stu1.sayHi = function () {
				console.log('这是sayHi方法的功能');
			};
			// 3 返回这个对象
			return stu1;
		}

		var jack = createStu('jack', 18);
		console.log(jack.name, jack.age);
		jack.sayHi();

3、构造函数模式

		function Create (name, age) {
			this.name = name;
			this.age = age;
			this.sayHi = function () {
				console.log('这是sayHi');
			};
		}
		var c1 = new Create('jack', 18);
		c1.sayHi();

1、new的作用
① 创建了对象
② 将函数内的this设置为创建的对象
③ 返回了这个对象
④ 可以帮我们进行函数调用
2、调用前必须加new
3、在构造函数中只需要给要创建的对象进行功能设置即可
4、(建议)构造函数的函数名首字母大写

4、原型模式

原型是个坑,我现在还没填明白

function Person(){}
  Person.prototype.name = 'jack';
  Person.prototype.age = 19;
  Person.prototype.sayName = function(){
    console.log(this.name);
  }
  var person1 = new Person();
  person1.sayName();//"jack"
  var person2 = new Person(); 
  person2.sayName(); //"jack" 
  console.log(person1.sayName === person2.sayName); //true

使用原型对象可以让所有对象实例共享它所包含的属性和方法。
还有四种,分别是组合使用构造函数模式和原型模式动态原型模式Object.create()另有寄生构造函数模式和稳妥构造函数模式,四个坑,什么时候填了,什么时候再来加上

三、this的使用

1、this在普通函数中使用

① 指向window对象,即js浏览器环境中的顶级对象
② 由于window对象可以直接使用名称访问,所以这种this的访问方式是没有实际意义的

2、this在某个对象的方法中使用

① 指向当前对象,即函数调用者
② 以后只要在方法中操作当前对象,就统一使用this进行操作

3、特殊场景:构造函数中this只想创建的对象

new对函数内的this指向进行了修改

四、对象的遍历操作

var obj = {
			name : 'jack',
			age : 18,
			sayHi : function () {
				console.log('这是sayHi');
			}
		};
for (var k in obj) {
//k - 代表属性名 - 字符串类型
	if (typeof obj[k] === 'function') {
				obj[k]();
				//obj[k] - 代表属性值
			} else {
				console.log(obj[k]);
			}
		}

1、数组中的元素按照索引排列,数组是一种有序的数据存储方式。而对象中的元素按照属性名保存,是一种无序的数据存储方式。
2、属性名 - 键,属性值 - 值,所以对象结构又称为键值对
3、对象需要使用for···in进行遍历操作。

五、对象的两种使用形式

1、作为数据存储使用

1、当我们将对象作为存储数据使用时是不会设置方法结构的
2、对象是按照键值对保存的,索引可以保存两组相关联的数据

2、作为工具使用

1、设置一个或多个对象,通过对象的属性和方法结合完成一些操作,我们就称这是一种工具的使用方式。
2、自定义工具,自己创建一个对象,设置一些属性方法
3、内置工具

六、内置对象

js中有很多的数据类型,为了方便开发者对数据类型进行操作,提供了很多的功能,这些功能根据操作的数据类型不同,划分了多个对象,我们称之为内置对象。
全局对象、Number、Boolean、String、Array、Object、Function、Date、Math 等都是内置对象
下一篇将详细讲解内置对象,此篇完。

猜你喜欢

转载自blog.csdn.net/weixin_40589472/article/details/83999788
今日推荐