JavaScript数据类型，对象，构造函数，原型对象，初识原型链，对象继承

一.单词部分

①object父类②constructor构造函数③instance实例④call调用

⑤apply应用⑥combination组合⑦inheritance继承

二.预习部分

1.简述创建对象的两种方法，以及两者的区别

new  和  字面量赋值

前者要用点.添加属性和方法

后者直接调用

2.简述使用构造函数创建实例的步骤

①创建一个新对象

②将构造函数的作用域赋值给新对象

③执行构造函数代码块

④返回新对象

3.简述原型链在继承中的作用

它是实现继承的主要方法

三.上机部分

1.创建person对象

  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>创建person对象</title>
   
  </head>
   
  <body>
  <div id="aa"></div>
  <script>
  var createTi=document.createElement("p");
  var person=new Object();
  person.name="郎晓明";
  person.age="38";
  person.job="中国内地男演员、歌手";
  person.address="中国北京海淀区";
  person.info=function () {
  var strr="姓名："+this.name+"<br/>年龄："+this.age+"<br/>工作："+this.job+"<br/>住址："+this.address;
  //document.write(strr);
  document.getElementById("aa").innerHTML=strr;
  }
  person.info();
  </script>
  </body>
  </html>

2.创建person构造函数

  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>上机练习二</title>
  </head>
  <body>
  <div id="aa"></div>
  <script>
  function Person(name,age,job,address) {
  this.name=name;
  this.age=age;
  this.job=job;
  this.address=address;
  this.show=function() {
  var createTi=document.createElement("p");
  var strr="姓名："+this.name+"<br/>年龄："+this.age+"<br/>工作："+this.job+"<br/>住址："+this.address;
  document.getElementById("aa").innerHTML=strr;
  }
  }
  function Pers(){
   
   
  }
  //var newper=new Person("郎晓明","38","中国内地男演员、歌手","中国北京海淀区");
  Pers.prototype.name1="陈东";
  Pers.prototype.age1="20";
  Pers.prototype.job1="IT";
  Pers.prototype.address1="河南省";
  Pers.prototype.showinn=function () {
  var createTi=document.createElement("p");
  var strrr="姓名："+this.name1+"<br/>年龄："+this.age1+"<br/>工作："+this.job1+"<br/>住址："+this.address1;
  document.getElementById("aa").innerHTML=strrr;
  }
  var one=new Pers();
  one.showinn();
  //newper.show();
  </script>
  </body>
  </html>

3.创建person对象原型链

  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>上机练习三</title>
  </head>
  <body>
  <div id="aa"></div>
  <script>
  function Person(nation,skinColor) {
  this.nation=nation;
  this.skinColor=skinColor;
  var aaa=document.getElementById("aa");
  this.shownation=function () {
  var createTi=document.createElement("p");
  var st="民族："+this.nation;
  createTi.innerHTML=st;
  aaa.appendChild(createTi)
  }
  this.showskin=function () {
  var createTi1=document.createElement("p");
  var st1="肤色："+this.skinColor;
  createTi1.innerHTML=st1;
  aaa.appendChild(createTi1);
  }
  }
  function Woman() {
  Person.call(this,"满族","黑色");
  this.sex="女";
  }
  var sexa=document.getElementById("aa");
   
  //Woman.prototype=new Person("汉族","黄色");
  Woman.prototype.showsex=function () {
  var createTi3=document.createElement("p");
  var st3="性别："+this.sex;
  createTi3.innerHTML=st3;
  sexa.appendChild(createTi3);
  }
   
  //var per1=new Person("汉族","黄色");
  var wo=new Woman();
   
  wo.shownation();
  wo.showskin();
  wo.showsex();
  </script>
  </body>
  </html>

4.创建继承person的student子类

  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>上机练习四</title>
  </head>
  <body>
  <div id="aa"></div>
  <script>
  function Person(name,chinese,math) {
  this.name=name;
  this.chinese=chinese;
  this.math=math;
  var aaa=document.getElementById("aa");
  this.showname=function () {
  var createTi=document.createElement("p");
  var st="姓名："+this.name;
  createTi.innerHTML=st;
  aaa.appendChild(createTi)
  }
  this.showchinese=function () {
  var createTi1=document.createElement("p");
  var st1="语文："+this.chinese;
  createTi1.innerHTML=st1;
  aaa.appendChild(createTi1);
  }
  this.showmath=function () {
  var createTi2=document.createElement("p");
  var st2="数学："+this.math;
  createTi2.innerHTML=st2;
  aaa.appendChild(createTi2);
  }
  }
  function Student() {
  Person.call(this,"少君","56","96");
  this.age="19";
  }
  var sexa=document.getElementById("aa");
   
  //Student.prototype=new Person("陈东","88","99");
  Student.prototype.showage=function () {
  var createTi3=document.createElement("p");
  var st3="年龄："+this.age;
  createTi3.innerHTML=st3;
  sexa.appendChild(createTi3);
  }
   
  //var per1=new Person("汉族","黄色");
  var stu=new Student();
  stu.showname();
  stu.showchinese();
  stu.showmath();
  stu.showage();
  /*var ncm = new Person("陈东","88","99");
  ncm.showname();
  ncm.showchinese();
  ncm.showmath();*/
  </script>
  </body>
  </html>

四.总结

1.对象分为内置对象和自定义对象

2.原型链是实现继承的主要方法

3.组合继承的思路是使用原型链实现对原型属性和方法的继承

欢迎提问，欢迎指错，欢迎讨论学习信息 有需要的私聊 发布评论即可 都能回复的

原文在博客园http://www.cnblogs.com/a782126844/有需要可以联系扣扣：2265682997

accp8.0转换教材第8章JavaScript对象及初识面向对象理解与练习的更多相关文章

  1. accp8.0转换教材第7章JavaScript操作DOM对象理解与练习

    程序调试,chrome开发人员工具,DOM操作,节点和节点间的关系,节点信息,操作节点,获取元素 一.单词部分 ①alert警告②prompt提示③parentNode父节点④childNode子节点 ...

  2. accp8.0转换教材第10章Ajax和jQuery理解与练习

    C/S (Client/Server)结构,即大家熟知的客户机和服务器结构. B/S(Browser/Server)结构即浏览器和服务器结构. 认识ajax .XMLHttpRequest.使用jqu ...

  3. 第五章 JavaScript对象及初识面向对象

    第五章   JavaScript对象及初识面向对象 一.对象 在JavaScript中,所有事物都是对象,如字符串.数值.数组.函数等. 在JavaScript对象分为内置对象和自定义对象,要处理一些 ...

  4. accp8.0转换教材第11章JAjax加护扩展理解与练习

    ①杂记:前面有原生态JavaScript实现ajax这里又多了更简单的方法实现ajax ②$.get()方法的常用参数 参数 类型 说明 url String 必选,规定发送地址 data Plain ...

  5. accp8.0转换教材第9章JQuery相关知识理解与练习

    自定义动画 一.单词部分: ①animate动画②remove移除③validity有效性 ④required匹配⑤pattern模式 二.预习部分 1.简述JavaScript事件和jquery事件 ...

  6. accp8.0转换教材第6章连接MySQL理解与练习

    JDBC_ODBC,纯java方式连接mysql 1.单词部分 ①JDBCjava连接数据库②driver manager驱动③connection连接④statement声明 ⑤execute执行⑥ ...

  7. accp8.0转换教材第4章MySQL高级查询(二)理解与练习

    知识点:EXISTS子查询.NOT EXISTS子查询.分页查询.UNION联合查询 一.单词部分 ①exist存在②temp临时的③district区域 ④content内容⑤temporary暂时 ...

  8. accp8.0转换教材第1章多线程理解与练习

    一.单词部分: ①process进程 ②current当前的③thread线程④runnable可获取的 ⑤interrupt中断⑥join加入⑦yield产生⑧synchronize同时发生 二.预 ...

  9. accp8.0转换教材第5章事务、视图、索引、备份和恢复理解与练习

    知识点:事务.视图.索引.数据库的备份和恢复 一.单词部分 ①transation事务②atomicity原子性③consistency一致性④isolation隔离性 ⑤durability持久性⑥ ...

随机推荐

  1. 浏览器播放rtsp流媒体解决方案

    老板提了一个需求,想让网页上播放景区监控的画面,估计是想让游客达到未临其地,已知其境的状态吧.    说这个之前,还是先说一下什么是rtsp协议吧. RTSP(Real Time Streaming ...

  2. Ubuntu安装Cassandra

    Uninstall Cassandra $ sudo su remove cassandra $ apt-get remove cassandra cleaned the cassandra fold ...

  3. 开源网络操作系统--VyOS

    User Guide Jump to: navigation, search Contents 1 Introduction 2 Installation 3 Using the Command-Li ...

  4. R TUTORIAL: VISUALIZING MULTIVARIATE RELATIONSHIPS IN LARGE DATASETS

    In two previous blog posts I discussed some techniques for visualizing relationships involving two o ...

  5. 生成简单的php验证码

    之前发表过,但是上面只是一个截图,不便于大家复制和使用,所以在这重新发表一遍. <?php //生成验证码图片 Header("Content-type: image/JPEG&quo ...

  6. ImageView最大高度和宽度失效解决方案

    解决方案 做RecyclerView的 item 布局时,用到imageview ,可是图片按原始尺寸显示,不规范. 所以去google了一下imageview的宽高限制,就试了下maxheight/ ...

  7. 一天搞定HTML----常用标签01

    1.常用标签说明 2.其他类标签演示 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  8. Idea中执行TestNg报错

    今天在Idea中使用TestNg过程中报错: java.lang.AbstractMethodError: org.testng.remote.RemoteTestNG$DelegatingTestR ...

  9. C#从基于FTPS的FTP server下载数据 (FtpWebRequest 的使用)SSL 加密

    FTPS,亦或是FTPES, 是FTP协议的一种扩展,用于对TLS和SSL协议的支持. 本文讲述了如何从一个基于FTPS的Server中下载数据的实例.   任何地方,如有纰漏,欢迎诸位道友指教.   ...

  10. 深入探索C++对象模型(六)

    执行期语意学(Runtime Semantics) 对象的构造和析构(Object Constructor and Destructor) 一般而言,constructor和destructor的安插 ...