文章目录
JavaScript对象及初识面向对象
1、对象
1.1 对象的概念
- 对象是包含相关属性和方法的集合体
- 面向对象仅仅是一个概念或者编程思想
- 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() 经历的三个步骤
- 搜索实例
- 搜索Man.prototype
- 搜索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 组合继承
组合继承：有时也叫做伪经典继承
- 将原型链和借用构造函数的技术组合到一块，发挥二者之长的一种继承模式
- 使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承
总结
