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. 电商app开发新趋势！如何突显竞争力？

    2017年是电商变化最大的一年,同时,也是最多机遇的一年,更是电商最好的时代,如最近所看到的亚马逊的市值已经超过了美国8大零售商的总和,带领美国率先走向了新零售时代;马云也在做改变,试图与线下的大卖场 ...

  2. excel vba 实现跨表单(sheet) 搜索 - 显示搜索行记录搜索历史

    前两天,一个朋友问我,有没有办法在excel里实现一个表单里是原始数据,在另一个表单里显示搜索到的行,搜索关键词可用~分隔开,并把搜索历史记录下来? 我想了想,用vba实现肯定可以啊,但是我又在想,有 ...

  3. Vue2.x中的Render函数

    Render函数是Vue2.x版本新增的一个函数:使用虚拟dom来渲染节点提升性能,因为它是基于JavaScript计算.通过使用createElement(h)来创建dom节点.createElem ...

  4. js实现省市区三级联动

    电商平台或者一些网站的个人信息部分,通常会有填写地址的功能.该功能一般分为二级联动(省.市)和三级联动(省.市.区),只需要JavaScript就可以实现. 这里介绍一种很简洁易用的方法.参考地址:h ...

  5. WPF 杂谈——Binding表达式

    不管是定义控件还是用户控件都会用到一个功能--绑定(Binding).书面的叫法:元素绑定.意思就是让绑定的元素实现数据同步.在笔者看来WPF引入这一个功能实在是太完美了.编程更加的具体化.特别是跟M ...

  6. 【小练习04】HTML+CSS--医药健康小页面

    要求实现如下效果图: 代码演示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

  7. loadrunner学习理论之一

    1.负载测试.压力测试的区别? 答:负载测试是在被测系统所承受的正常范围内进行的 压力测试可以在极端的条件下进行 2.loadrunner的三大组件是什么,有什么作用? 答:虚拟用户生成器(virtu ...

  8. linux exec操作文件描述符

    linux每一个打开文件都会关联一个文件描述符,需要的时候我们可以使用exec命令指定一个大于3的数字作为文件 linux默认文件描述符 每打开一个shell就会打开默认的三个文件描述符描0,1,2, ...

  9. shell网络客户端

    需要把线上的access日志发送到另一个程序接收 开始想着用python实现,虽然python也有实现类似tail -F的方式,但太麻烦,而且效率也有折扣 偶然发现了shell可以实现网络client ...

  10. HTML里的哪一部分Javascript 会在页面加载的时候被执行？

    最近遇到一个问题:HTML里的哪一部分Javascript 会在页面加载的时候被执行()A : 文件头部 B : 文件尾 C : <head>标签部分 D : <body>标签 ...