文章目录

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 对象的概念

对象是包含相关属性和方法的集合体
面向对象仅仅是一个概念或者编程思想
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 组合继承

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

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

总结

JavaScript基础——第四章，JavaScript对象及初识面向对象相关推荐

Javascript基础与面向对象基础~第四讲 Javascript中的类对象
今天来说JS中如何实现类(class),事实上本应该昨天晚上写的,可我失言了,在些说一声"抱歉"!JS中的类是JS面向对象的基础,也是我最拿手的东西,你写的代码能否提高一个层次,一 ...
大学计算机ppt操作表格,大学计算机应用基础第四章电子表格软件Exc.ppt
大学计算机应用基础第四章电子表格软件Exc.ppt (47页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 19.9 积分第四章电子表格Excel 20 ...
大学计算机基础第四章ppt,大学计算机基础第四章.ppt
<大学计算机基础第四章.ppt>由会员分享,可在线阅读,更多相关<大学计算机基础第四章.ppt(38页珍藏版)>请在装配图网上搜索. 1.大学计算机基础 (第2版),第4章数 ...
计算机软件基础第四章答案,计算机应用基础第四章
<计算机应用基础第四章>由会员分享,可在线阅读,更多相关<计算机应用基础第四章(3页珍藏版)>请在人人文库网上搜索. 1.1[单选题]使图片按比例缩放应选用().窗体顶端A.拖 ...
第四章计算机基础,大学计算机基础第四章.ppt
<大学计算机基础第四章.ppt>由会员分享,可在线阅读,更多相关<大学计算机基础第四章.ppt(38页珍藏版)>请在人人文库网上搜索. 1.大学电脑基础(版本2).第4章数据库 ...
二进制除法教程计算机基础,计算机应用基础第四章《二进制的学习》课件.ppt...
<计算机应用基础第四章<二进制的学习>课件.ppt>由会员分享,可在线阅读,更多相关<计算机应用基础第四章<二进制的学习>课件.ppt(26页珍藏版)> ...
Web前端开发笔记——第四章 JavaScript程序设计第一节 JavaScript的基础语法
目录一.JavaScript的定义二.代码的创建和使用 (一)内嵌JavaScript代码 (二)引用JavaScript文件三.代码的注释四.输出数据 (一)alert()弹出警告框 (二) ...
JavaScript基础（四）对象、数组、对象与数组的常用API
目录一.对象 1. 对象的创建 2. 对象属性的访问 3. 遍历对象属性 4. 检测属性是否存在 5. 对象的方法二.数组对象 1. 数组的创建 2. 访问数组 3. 数组长度 4. 数组的遍历 ...
JavaScript进阶 - 第9章 DOM对象，控制HTML元素
第9章 DOM对象,控制HTML元素 9-1 认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属 ...

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基础——第四章，JavaScript对象及初识面向对象相关推荐

最新文章

热门文章