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. 第 9 章 MySQL数据库Schema设计的性能优化

    前言: 很多人都认为性能是在通过编写代码(程序代码或者是数据库代码)的过程中优化出来的,其实这是一个非常大的误区.真正影响性能最大的部分是在设计中就已经产生了的,后期的优化很多时候所能够带来的改善都只 ...

  2. 彻底清除Linux centos minerd木马

    前几天,公司两台linux服务器,一台访问速度很慢,cpu跑满,一台免密码登录失效,公钥文件被改写成redis的key.用htop命令查询发现了minerd木马进程,初步猜测是redis没有配访问权限 ...

  3. Github+Hexo,搭建专属网站

    前言 记得从大二开始,就一直想搭个专属网站,当时使劲抠页面[前端页面是从QQ空间抠的,现在想抠估计没这么容易了],写代码,忙活半天才把程序弄好. 可惜最终项目还是没上线,因为当时有两问题绕不开 需要购 ...

  4. cas4.2.7 取消https

    cas.properties 修改两个地方 # Decides whether SSO cookie should be created only under secure connections. ...

  5. Python多线程和多进程谁更快？

    python多进程和多线程谁更快 python3.6 threading和multiprocessing 四核+三星250G-850-SSD 自从用多进程和多线程进行编程,一致没搞懂到底谁更快.网上很 ...

  6. [HDU1002] A + B Problem II

    Problem Description I have a very simple problem for you. Given two integers A and B, your job is to ...

  7. uibutton颜色设置

     UIColor *color = [UIColor colorWithRed:100 / 255.0 green:20 / 255.0 blue:50 / 255.0 alpha:1.0]; 

  8. 利用React/anu编写一个弹出层

    本文将一步步介绍如何使用React或anu创建 一个弹出层. React时代,代码都是要经过编译的,我们很多时间都耗在babel与webpack上.因此本文也介绍如何玩webpack与babel. 我 ...

  9. JavaScript用二分法查找数据等

    //二分法查数据 var arr=[41,43,45,53,44,95,23]; var b=44; var min=0; var max=arr.length; for(var i=1;i<a ...

  10. 在ASP.Net MVC 中如何实现跨越Session的分布式TempData

    Hi,guys!Long time no see! 1.问题的引出 我相信大家在项目中都使用过TempData,TempData是一个字典集合,一般用于两个请求之间临时缓存数据或者页面之间传递消息.也 ...