JavaScript基础——第四章，JavaScript对象及初识面向对象

文章目录

• JavaScript对象及初识面向对象
• 1、对象
• 1.1 对象的概念
• 1.2 内置对象
• 1.3 自定义对象
• 1.3.1 操作符new创建对象
• 1.3.2 使用字面量赋值的方式定义对象
• 2、构造函数
• 2.1 什么是构造函数
• 2.2 构造函数的应用
• 3、原型对象
• 3.1 什么是原型对象
• 3.2 对象之间的关系
• 4、继承
• 4.1 原型链
• 4.1.1 什么是原型链
• 4.1.2 构造函数和原型之间的关系
• 4.1.3 完整的原型链
• 4.2 对象继承
• 4.2.1 借用构造函数
• 4.2.2 组合继承
• 总结

JavaScript对象及初识面向对象

1、对象

1.1 对象的概念

1. 对象是包含相关属性和方法的集合体
2. 面向对象仅仅是一个概念或者编程思想
3. JavaScript 通过一种叫做原型的方式来实现对象对象编程

1.2 内置对象

常见的内置对象

• String( 字符串 ) 对象
  * lentth属性
  * indexOf()，replace()方法
• Date( 日期 ) 对象
  * getxxx : 获取年、月、日、时、分、秒等等
  * setxxx : 设置年、月、日、时、分、秒等等
• Array( 数组 ) 对象
  * lentth属性
  * sort()，concat()，join()方法
• Boolean( 逻辑 ) 对象
  * true或者false
  * toString()方法
  5 Math( 算数 ) 对象
  * round()，max()，min()方法
  * …
• RegExp 对象
  * RegExp 是正则表达式的缩写

1.3 自定义对象

1.3.1 操作符new创建对象

基于Object对象的方式创建对象

var 对象名称 = new Object();

var flower = new Object();
flower.name = "长春花";
flower.genera = "夹竹桃科 长春花属";
flower.area = "非洲、亚热带、热带以及中国大陆的华东、西南、中南等地";
flower.uses = "观赏或用药等";
flower.showName = frunction() {
	alert(this.name);
}
flower.showName();

1.3.2 使用字面量赋值的方式定义对象

var flower = {
	name = "长春花";
	genera = "夹竹桃科 长春花属";
	area = "非洲、亚热带、热带以及中国大陆的华东、西南、中南等地";
	uses = "观赏或用药等";
	showName:frunction() {
		alert(this.name);
	}
}
flower.showName();

2、构造函数

2.1 什么是构造函数

2.2 构造函数的应用

• 创建构造函数
  
• 使用构造函数创建对象
  
• 使用构造函数创建新实例
  • 使用构造函数创建对象
    1、创建一个新对象
    2、将构造函数的作用域赋给新对象（this 就指向了这个新对象）
    3、执行构造函数中的代码
    4、返回新对象

3、原型对象

3.1 什么是原型对象

function Flower() {
}
Flower.prototype.name = "长春花";
Flower.prototype.genera = "夹竹桃科 长春花属";
Flower.prototype.genera = "夹竹桃科 长春花属";
Flower.prototype.area = "非洲、亚热带、热带以及中国大陆的华东、西南、中南等地";
Flower.prototype.showName = frunction() {
	alert(this.name);
}
var flower1 = new Flower();
flower1.showName();
var flower2 = new Flower();
flower2.showName();
alert(flower1.showName == flower2.showName)

3.2 对象之间的关系

function Flower() {
}
Flower.prototype.name = "长春花";
Flower.prototype.genera = "夹竹桃科 长春花属";
Flower.prototype.genera = "夹竹桃科 长春花属";
Flower.prototype.area = "非洲、亚热带、热带以及中国大陆的华东、西南、中南等地";
Flower.prototype.showName = frunction() {
	alert(this.name);
}
var flower1 = new Flower();
var flower2 = new Flower();
flower1.name = "曼陀罗花";
alert(flower1.name);
alert(flower2.name);

4、继承

4.1 原型链

4.1.1 什么是原型链

• 一个原型对象是另一个原型对象的实例
• 相关的原型对象层层递进，就构成了实例与原型的链条，这就是原型链

function Humans() {
	this.foot = 2;
}
Humans.prototype.getFoot = function() {
	return this.foot;
}
function Man() {
	this.head = 1;
}
Man.prototype = new Humans(); //继承了Humans
Man.prototype.getHead = function() {
	return this.head;
}
var man1 = new Man();
alert(man1.getFoot());			// 2
alert(man1 instanceof Object);	// true
alert(man1 instanceof Humans);	// true
alert(man1 instanceof Man);		// true

4.1.2 构造函数和原型之间的关系

调用man1.getFoot() 经历的三个步骤

1. 搜索实例
2. 搜索Man.prototype
3. 搜索Humans.prototype

4.1.3 完整的原型链

Object 在原型链中的位置

4.2 对象继承

function Humans() {
	this.clothing = ["trousers","dress","jecket"]
}
function Man() {
}
//继承了Humans
Man.prototype = new Humans();
var man1 = new Man();
man1.clothing.push("coat");
alert(man1.clothing());
var man2 = new Man();
alert(man2.clothing());

• man1.clothing()和man2.clothing()输入的信息一样，为什么？
  创建子类型的实例时，不能向父类型的构造函数中传递参数

4.2.1 借用构造函数

语法： apply([thisOjb[,argArray]])

应用某一对象的一个方法，用另一个对象替换当前对象

语法： call([thisOjb[,arg1[,arg2[,argN]]]]])

调用一个对象的一个方法，以另一个对象替换当前对象

function Humans(name) {
	this.name = name;
}
function Man() {
	Humans.call(this."mary");	// 继承了Humans，同时还传递了参数
	this.age = 38;	// 实例属性
}
var man1 = new Man();
alert(man1.name());	// 输出mary
alert(man2.age());	// 输出38

4.2.2 组合继承

组合继承：有时也叫做伪经典继承

• 将原型链和借用构造函数的技术组合到一块，发挥二者之长的一种继承模式
• 使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承

总结