JavaScript学习笔记 面向对象——对象

对象

什么是对象?

万物皆对象,但“在JavaScript中万物皆对象”说法是显然错误的。
原因:JavaScript共有六种主要类型

  • string
  • number
  • boolean
  • null
  • undefined
  • object

其中的简单类型(string、boolean、number、null和undefined)本身并不是对象。
注意:
null有的时候会被当做一种对象类型,其实是语言自身的bug
null类型
但其实null本身是基本类型。
对象的理解:

  • 对象是单个事物的抽象;
  • 对象是一个容器,封装了属性(Property)和方法(Method);
    属性:对象的状态;
    方法:对象的行为(完成某种任务)

对象是一个抽象的概念,可将其理解为:数据集或功能集,无序属性的集合,其属性可包含基本值、对象或者函数,严格讲,对象是一组没有特定顺序的值,对象的每个属性或方法都有一个名字,而每个名字都映射到一个值
每个对象都是基于一个引用类型创建的,这类型可以是系统内置的原生类型,也可以是自己自定义类型。

语法

对象可以通过两种形式定义:声明(文字)形式构造形式

  • 文字形式
var myObj = {
	key: value
	// ...
};
  • 构造形式
var myObj = new Object();
myObj.key = value;

构造形式和文字形式生成的对象是一样的。

对象内容

对象的内容是由一些存储在特定命名位置的(任意类型的)值组成的,即属性。对象的内容看起来是被存储在对象内部,但也只是表现形式,这些值的存储方式多种多样的,一般并不会存在对象容器内部,存储在对象容器内部的是这些属性的名称,作用就像是指针(引用)一样,指向这些值真正的存储位置
访问对象值的方法:

var myObject = {
	a: 2
};
myObject.a;   // 2
myObject['a'];   // 2

需要访问特定位置上的值,需要使用:

  • 点操作符
  • [ ] 操作符

如上例中.a语法被称为“属性访问”,而[“a”]语法通常称为“键访问”
两种语法的主要区别

  • 点操作符要求属性名满足标识符的命名规范;
  • [ ]操作符语法可接受任意UTF-8/Unicode字符串作为属性名

当使用string(字面量)以外的其他值作为属性名,那它首先会被转换为一个字符串,即使是数字也不例外

var myObject = {};
myObject[true] = "foo";
myObject[3] = "bar";
myObject[myObject] = "baz";

myObject["true"];     // "foo"
myObject["3"];        // "bar"
myObject["[object Object]"];      // "baz"
创建对象
  • 简单方式
    可直接通过new Object( )创建,调用系统的构造函数:
var person = new Object()
person.name = 'Jack'
person.age = 18
person.SayName = function(){
	console.log(this.name)
}

每次创建new Object( ) 比较麻烦

  • 字面量方式
 var person1 = {
 	name:'Jack',
 	age:18,
 	SayName:function(){
 		console.log(this.name)
 		}
}
var person2 = {
	name:'Mike',
	age:20,
	SayName:function(){
		console.log(this.name)
	}
}

代码太过冗余,重复性过高

  • 简单方式的改进:工厂函数
    写一个函数,解决代码重复问题
function createPerson(name, age){
	return {
		name: name,
		age: age,
		SayName:function(){
		console.log(this.name)
		}
	}
}

var p1 = createPerson('Jack', 18);
var p2 = createPerson('Mike', 20);
console.log(p1 instanceof Object);    //true

问题:并没有解决对象识别的问题,即怎样知道一个对象的类型

  • 构造函数
    自定义构造函数,更优雅的工厂函数
function Person(name, age){
	this.name = name
	this.age = age
	this.SayName = function(){
		console.log(this.name)
	}
}
var P3 = new Person("Mia", 24)
console.log(P3 instanceof Object)    // true
console.log(P3 instanceof Person)    // true

Person( )函数取代了createPerson( )函数,但有以下的不同之处:

  • 没有显示的创建对象;
  • 直接将属性和方法赋给了this对象;
  • 没有return语句;
  • 函数名使用的是大写的Person,而要创建Person实例,则必须使用new操作符

这种方式调用构造函数会经历以下4个步骤:
①创建一个新对象,开辟存储空间;
②将构造函数的作用域赋给新对象(因此this就指向了这个新对象),即把this设置为当前的对象;
③执行构造函数中的代码,即设置属性和方法的值;
④返回新对象,即将this对象返回;
实例说明:

function Person(name, age){
	// 当使用new操作符调用Person()的时候,实际上这里会先创建一个对象
	// var instance = {}
	// 然后让内部的this指向instance对象
	// this = instance
	// 接下来所有针对this的操作实际上操作的就是instance
	this.name = name;
	this.age = age;
	this.SayName = function(){
		console.log(this.name);
	}
	// 在函数的结尾处会将this返回,也就是instance
	// return this
}

总结:
创建对象的三种方式:
①字面量的方式;
②调用系统的构造函数;
③自定义构造函数;

构造函数和实例对象的关系
构造函数:创建对象
实例对象的构造器就是构造函数

var P3 = new Person('Mia', 27)
console.log(P3.constructor == Person)  // true
console.log(P3.__proto__.constructor == Person)     //true
console.log(P3.__proto__.constructor == Person.prototype.constructor)         //true

使用构造函数的好处:代码简洁,同时可以识别对象的具体类型了
在每一实例对象中的__proto__中同时有一个constructor属性,该属性指向创建该实例的构造函数:
constructor
对象的constructor属性最初是用来标识对象类型的,但是,如果要检测对象的类型,还是使用instanceof操作符更符合一些:

console.log(p3 instanceof Person)    // true

综上:
构造函数是根据具体的事物抽象出来的模板;
实例对象是根据抽象的构造模板得到的具体实例对象;
每个实例对象都具有一个constructor,指向创建该实例的构造函数
也可通过constructor来判断实例对象和构造函数之间的关系,但推荐使用instanceof

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值