accp8.0转换教材第8章JavaScript对象及初识面向对象理解与练习

时间：2023-01-17 00:25:49

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&period;0转换教材第7章JavaScript操作DOM对象理解与练习

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

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

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

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

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

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

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

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

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

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

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

  7. accp8&period;0转换教材第4章MySQL高级查询&lpar;二&rpar;理解与练习

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

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

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

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

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

随机推荐

  1. chartjs执行图表

    <html> <head> <title></title> </head> <body> <div style='widt ...

  2. ios 随记录

    1. 设置全局的就不写了.当单个VC需要的时候.一般是这样子. /* 设置StatusBar的样式,UIStatusBarStyleDefault与UIStatusBarStyleLightConte ...

  3. Oracle 课程六之hint

    课程目标 完成本课程的学习后,您应该能够: •什么是oracle hint •Hint的使用范围 •Hint 汇总 •演示常用的hint   Hint简介 Hint是oracle 提供的一种SQL语法 ...

  4. 【C语言学习】存储类型

    C语言中的存储类型主要有四种:auto.static.extern.register ★auto存储类型 默认的存储类型.在C语言中,假设忽略了变量的存储类型,那么编译器就会自己主动默认为auto型 ...

  5. iOS国际化和genstrings所有子目录本地化字符串

    最近在忙着一个国外项目,天天加班,没时间更新博客.就简单讲讲国际化的知识. 首先,我们使用字符串,必须用NSLocalizedString(key,comment),这样我们在不同的Localizab ...

  6. MySQL日志文件之错误日志和慢查询日志详解

    今天天气又开始变得很热了,虽然很热很浮躁,但是不能不学习,我在北京向各位问好.今天给大家分享一点关于数据库日志方面的东西,因为日志不仅讨厌而且还很重要,在开发中时常免不了与它的亲密接触,就在前几天公司 ...

  7. C&num; 串口操作系列&lpar;5&rpar;--通讯库雏形

    C# 串口操作系列(5)--通讯库雏形 标签: 通讯c#数据分析byteclassstring 2010-08-09 00:07 21378人阅读 评论(73) 收藏 举报  分类: 通讯类库设计(4 ...

  8. P3366 【模板】最小生成树（boruvka&sol;sollin）

    P3366 [模板]最小生成树 boruvka/sollin 复杂度$O(mlogn)$ 简要说明一下过程 引入一个数组$link[i]$表示连通块$i$下一步可更新的最短的边的编号 1.每次枚举所有 ...

  9. BCS SET EMAIL

    FUNCTION zcrm_send_email. *"------------------------------------------------------------------- ...

  10. git 指定要提交的ssh key

    问题描述 ssh具有-i选项,用于告知在验证时使用哪个私钥文件: -i identity_file Selects a file from which the identity (private ke ...

相关文章