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

创建对象
自定义对象
内置对象

自定义对象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基础及初始面向对象的更多相关文章

  1. JAVAScript对象及初始面向对象

              javaScript对象及初始面向对象 1:内置对象 例:Date String Array 类等... 2:自定义对象 方法1:var newObj=new Object(); ...

  2. JavaScript基础入门12 - 面向对象编程

    目录 JavaScript 面向对象编程 前言 构造函数创建对象 instanceof constructor 返回值 原型对象 关于对象的属性查找 in hasOwnProperty() JS当中实 ...

  3. 使用jQuery快速高效制作网页交互特效---JavaScript对象及初始面向对象

    一.JavaScript中的基本数据类型 number(数值类型)    string(字符串类型)    boolean(布尔类型)    null(空类型)    undefined(未定义类型) ...

  4. 第四章 JavaScript对象及初始面向对象

    创建对象: //方式一 var ower=new Object(); ower.name="长春花"; ower.genera="夹竹挑科 长春花属"; owe ...

  5. Javascript基础回顾 之(三) 面向对象

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  6. 一个简单的、面向对象的javascript基础框架

    如果以后公司再能让我独立做一套新的完整系统,那么我肯定会为这个系统再写一个前端框架,那么我到底该如何写这个框架呢? 在我以前的博客里我给大家展示了一个我自己写的框架,由于当时时间很紧张,做之前几乎没有 ...

  7. 前端之JavaScript基础

    前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...

  8. Javascript基础回顾 之(二) 作用域

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  9. Javascript基础回顾 之(一) 类型

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

随机推荐

  1. SVN增加访问用户

    1.在Linux中进入SVN配置文件目录. 2.authz是设置权限的,只读还是可读可写,passwd是增加访问用户的. vim passwd; vim authz;

  2. Pythn基础课程笔记day03_学习内容概要及作业讲解

    第三天_学习内容概要 今日内容概要 1.整形 2.布尔类型 3.字符串 内容回顾和补充 内容回顾 利用思维导图,罗列复习自己学习的内容,巩固知识点. xmind 软件 processon 网站 补充 ...

  3. BBS项目架构

    数据库设计 用户表(用的是auth_user那张表,通过自定义表继承AbstractUser) phone 电话 avatar 头像 create_time 创建时间#外键 blog 一对一个人站点表 ...

  4. PAT(B) 1027 打印沙漏(Java)

    题目链接:1027 打印沙漏 (20 point(s)) 题目描述 本题要求你写个程序把给定的符号打印成沙漏的形状.例如给定17个"*",要求按下列格式打印 ***** *** * ...

  5. 如何用Java实现条件编译

    在 C 或 C++ 中,可以通过预处理语句来实现条件编译.代码如下: #define DEBUG #IFDEF DEBUUG /* code block 1 */ #ELSE /* code bloc ...

  6. Vue自定义指令和自定义过滤器

    一.自定义指令: 自定义指令分为两种:全局自定义指令和局部自定义指令 全局指令指所有组件都可以使用,局部指令是只有在当前组件中才可以使用. 如,我们现在有个需求,当一个输入框获取焦点时,显示出一个di ...

  7. Go 操作 Mysql(二)

    查询数据方法回顾整理 上一篇博客中,主要是快速过了一遍 demo 代码和 DB 类型对象中方法的使用 在整理查询数据方法的时候,使用了 Query() 方法,其实 sqlx 还提供了 QueryRow ...

  8. 简单web性能测试工具——ab命令(ApacheBench)

    ab命令(ApacheBench) ----------转载内容 ApacheBench(即ab)通常用来做网站性能压力测试,是性能调优过程中必不可少的一环,ab命令会创建很多的并发访问线程,模拟多个 ...

  9. J.U.C之AQS:同步状态的获取与释放

    此篇博客所有源码均来自JDK 1.8 在前面提到过,AQS是构建Java同步组件的基础,我们期待它能够成为实现大部分同步需求的基础.AQS的设计模式采用的模板方法模式,子类通过继承的方式,实现它的抽象 ...

  10. Linux 常见压缩格式详解

    linux 文件压缩格式详解 压缩文件原理 在计算机科学和信息论中,数据压缩或者源编码是按照特定的编码机制用比未经编码少的数据比特(或者其它信息相关的单位)表示信息的过程.例如,如果我们将" ...