javaScript基础及初始面向对象
对象是什么?
对象是包含相关属性和方法的集合体
属性
方法
什么是面向对象
面向对象仅仅是一个概念或者编程思想
通过一种叫做原型的方式来实现面向对象编程
创建对象
自定义对象
内置对象
自定义对象2-1
基于Object对象的方式创建对象
语法:
var 对象名称=new Object( );
示例:----------通过 . 添加属性和方法
var flower=new Object();
flower.name="长春花";
flower.genera="夹竹桃科 长春花属";
flower.area="非洲、亚热带、热带以及中国大陆的华东、西南、中南等地";
flower.uses="观赏或用药等";
flower.showName=function(){ alert(this.name); }
flower.showName();
自定义对象2-2
使用字面量赋值方式创建对象
示例:
var flower={
name:"长春花",
genera:"夹竹桃科 长春花属",
area:"非洲、亚热带、热带以及中国大陆的华东、西南、中南等地",
uses:"观赏或用药等",
showName:function(){ alert(this.name); }
}
flower.showName();
内置对象2-1
常见的内置对象:
String(字符串)对象
Date(日期)对象
Array(数组)对象
Boolean(逻辑)对象
Math(算数)对象
RegExp对象
学员操作—创建person对象2-2
练习:
实现思路
使用new创建对象person
var person=new Object();
使用“.”添加属性
person.name="朗晓明";
person.age="38";
使用+把各属性的值拼接起来,使用innerHTML为页面元素赋值
var str="姓名:"+this.name+"<br/>年龄:"+this.age+"……;
简写:var str=this.name+this.age+……;
document.getElementById("intro").innerHTML=str;
构造函数和原型对象
如何解决使用同一个接口不需要创建很多对象,减少产生大量的重复代码?
构造函数
原型对象
构造函数
创建构造函数
示例:
function Flower(name,genera,area,uses){
this.name=name;
…….
this.showName=function(){
alert(this.name);
}
}
var flower1=new Flower("长春花","夹竹桃科 长春花属","非洲、亚热带、热带以及中国大陆的华东、西南、中南等地","观赏或用药等")
flower1.showName();
使用构造函数创建对象
示例:
var flower2=new Flower("牡丹","芍药科 芍药属","中国","观赏、食用或药用");
flower2.showName();
var flower3=new Flower("曼陀罗花","茄科 曼陀罗属","印度、中国北部","观赏或药用");
flower3.showName();
使用构造函数创建新实例
调用构函数的4个步骤:
创建一个新对象
将构造函数的作用域赋给新对象(this就指向了这个新对象)
执行构造函数中的代码
返回新对象
constructor属性
constructor属性指向Flower
示例:
alert (flower1.constructor==Flower);
alert (flower2.constructor==Flower);
alert (flower3.constructor==Flower);
instanceof操作符
使用instanceof操作符检测对象类型
alert(flower1 instanceof Object);
alert(flower1 instanceof Flower);
alert(flower2 instanceof Object);
alert(flower2 instanceof Flower);
alert(flower3 instanceof Object);
alert(flower3 instanceof Flower);
原型对象2-1
示例:
function Flower(){
}
Flower.prototype.name="曼陀罗花";
Flower.prototype.genera="茄科 曼陀罗属";
Flower.prototype.area="印度、中国北部";
Flower.prototype.uses="观赏或药用";
Flower.prototype.showName=function() {
alert(this.name);
}
var flower1=new Flower();
flower1.showName();
var flower2=new Flower();
flower2.showName();
alert(flower1.showName==flower2.showName);
原型对象2-2
示例:
function Flower(){
}
Flower.prototype.name="曼陀罗花";
Flower.prototype.genera="茄科 曼陀罗属";
Flower.prototype.area="印度、中国北部";
Flower.prototype.uses="观赏或药用";
Flower.prototype.showName=function() {
alert(this.name);
}
var flower1=new Flower();
var flower2=new Flower();
flower1.name="长春花";
alert(flower1.name);
alert(flower2.name);
继承
原型链
对象继承
原型链4-1
一个原型对象是另一个原型对象的实例
相关的原型对象层层递进,就构成了实例与原型的链条,就是原型链
原型链4-2
示例:
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-3
构造函数和原型之间的关系
原型链4-4
调用man1.getFoot( ) 经历的三个步骤:
搜索实例
搜索Man.prototype
搜索Humans.prototype
完整的原型链
Object在原型链中的位置
对象继承
man1.clothing和man2.clothing输入的信息一样,为什么?
创建子类型的实例时,不能向父类型的构造函数中传递参数
示例:
function Humans(){
this.clothing=["trousers","dress","jacket"];
}
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);
借用构造函数2-1
语法:
apply([thisOjb[,argArray]])
应用某一对象的一个方法,用另一个对象替换当前对象
语法:
call([thisObj[,arg1[,arg2[, [,argN]]]]])
调用一个对象的一个方法,以另一个对象替换当前对象
借用构造函数2-2
示例:
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(man1.age); //输出38
组合继承
组合继承:有时也叫做伪经典继承
将原型链和借用构造函数的技术组合到一块,发挥二者之长的一种继承模式
使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承
javaScript基础及初始面向对象的更多相关文章
- JAVAScript对象及初始面向对象
javaScript对象及初始面向对象 1:内置对象 例:Date String Array 类等... 2:自定义对象 方法1:var newObj=new Object(); ...
- JavaScript基础入门12 - 面向对象编程
目录 JavaScript 面向对象编程 前言 构造函数创建对象 instanceof constructor 返回值 原型对象 关于对象的属性查找 in hasOwnProperty() JS当中实 ...
- 使用jQuery快速高效制作网页交互特效---JavaScript对象及初始面向对象
一.JavaScript中的基本数据类型 number(数值类型) string(字符串类型) boolean(布尔类型) null(空类型) undefined(未定义类型) ...
- 第四章 JavaScript对象及初始面向对象
创建对象: //方式一 var ower=new Object(); ower.name="长春花"; ower.genera="夹竹挑科 长春花属"; owe ...
- Javascript基础回顾 之(三) 面向对象
本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...
- 一个简单的、面向对象的javascript基础框架
如果以后公司再能让我独立做一套新的完整系统,那么我肯定会为这个系统再写一个前端框架,那么我到底该如何写这个框架呢? 在我以前的博客里我给大家展示了一个我自己写的框架,由于当时时间很紧张,做之前几乎没有 ...
- 前端之JavaScript基础
前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...
- Javascript基础回顾 之(二) 作用域
本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...
- Javascript基础回顾 之(一) 类型
本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...
随机推荐
- [SQL] - 报表查询效率优化
背景 系统将数据对象JSON序列化后存放到数据库字段中.Report 模块需要获取实时数据对象数值,当前在SQL中进行数值判断的耗时长,效率低. 分析 当前执行效率低主要是程序结构设计的不合理. SQ ...
- ElasticSearch RestHighLevelClient 通用操作
项目中使用到ElasticSearch作为搜索引擎.而ES的环境搭建自然是十分简单,且本身就适应于分布式环境,因此这块就不多赘述.而其本身特性和查询语句这篇博文不会介绍,如果有机会会深入介绍. 所 ...
- JAVA线程中的发牌题
发牌题主要考虑的就是线程的问题,一个buffer缓冲区的问题, 首先,发牌的优先级当然是最高的了,但是取牌不能有优先级,否则会一直有牌先取,因此需要一个信号量order,当order=线程的数字时,取 ...
- python基础 — CSV 数据处理
什么是csv 逗号分隔值(Comma-Separated Values,CSV,有时也称为字符分隔值,因为分隔字符也可以不是逗号),其文件以纯文本形式存储表格数据(数字和文本) 编码: encode ...
- 【LEETCODE】34、119题,Pascal's Triangle II
package y2019.Algorithm.array; import java.util.ArrayList; import java.util.List; /** * @ProjectName ...
- dotnet Core学习之旅(二):安装IDE
[重要:文中所有外链不能确保永久有效] >开发工具 高效的开发必然需要一个优秀的集成开发环境(IDE) 对于.NET Core 2.x可以使用包括但不限于以下IDE来进行开发. Visual S ...
- 怎样安装ipython
ipython 是一个python的交互式shell, 比默认的python shell更好用, 支持自动补全 / 上下翻等功能. 下面是按照方法: # 通用安装方法 pip install ipy ...
- Linux判断SSD或HDD + 模拟SSD
判断方法 方法一 判断cat /sys/block/*/queue/rotational的返回值(其中*为你的硬盘设备名称,例如sda等等),如果返回1则表示磁盘可旋转(HDD),返回0,则表示磁盘不 ...
- 【转载】C#使用as关键字将对象转换为指定类型
在C#的编程开发过程中,很多时候涉及到数据类型的转换,可使用强制转换的方式,不过强制转换数据类型有时候会抛出程序异常错误,可以使用as关键字来进行类型的转换,如果转换成功将返回转换后的对象,如果转换不 ...
- 【转】SpringCloud学习笔记(一)——基础
什么是微服务架构 简单地说,微服务是系统架构上的一种设计风格,它的主旨是将一个原本独立的系统拆分成多个小型服务,这些小型服务都在各自独立的进程中运行,服务之间通过基于HTTP的RESTful API进 ...