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

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

时间： 2024-08-01 22:03:49

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

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

程序调试,chrome开发人员工具,DOM操作,节点和节点间的关系,节点信息,操作节点,获取元素 一.单词部分 ①alert警告②prompt提示③parentNode父节点④childNode子节点⑤firstChild第一个子节点 ⑥lastChild最后一个子节点⑦nextSibling下一个同级⑧previousSibling上一个同级 ⑨createElement创建节点元素    appendChild附加节点    insertBefore在..之前添加 cloneNode复制 节

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

C/S (Client/Server)结构,即大家熟知的客户机和服务器结构. B/S(Browser/Server)结构即浏览器和服务器结构. 认识ajax .XMLHttpRequest.使用jquery实现ajax.处理json格式的响应数据.使用原生态JavaScript实现ajax 一.杂记 1.传统web技术和ajax的请求方式不同 ajax是只获得需要的元素  传统刷新全部 2.ajax的全称是"Asynchronous Javascript And XML"(异步Java

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

①杂记:前面有原生态JavaScript实现ajax这里又多了更简单的方法实现ajax ②$.get()方法的常用参数 参数 类型 说明 url String 必选,规定发送地址 data PlainObject或String 可选,规定请求发送的数据 success Function(PlainObject data, String textStatus,jqXHR jqxhr) 可选,成功后调用的函数 参数data:可选服务器返回结果 参数textStatus:可选描述请求状态 参数jqxh

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

一.单词部分: ①process进程 ②current当前的③thread线程④runnable可获取的 ⑤interrupt中断⑥join加入⑦yield产生⑧synchronize同时发生 二.预习部分 1.线程与进程的区别: 进程是系统运行程序的基本单位 线程是进程中执行运算的最小单位 2.说明创建线程的方式有哪两种 ①继承thread类 ②实现Runnable接口 3.线程的生命周期可分为几个阶段,各是什么阶段 五个阶段:①创建②就绪③运行④阻塞⑤死亡 4.使用线程的什么方法可以设置线程

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

自定义动画 一.单词部分: ①animate动画②remove移除③validity有效性 ④required匹配⑤pattern模式 二.预习部分 1.简述JavaScript事件和jquery事件方法不同 前者需要在 前面加on后者不要 2.调用执行jquery中的hasclass()方法能实现什么功能 查找是否有这个样式 3.validity:对象有哪些常用属性 toolong:判断输入的值是否超过限定字符 typemismatch:输入值是否与表单匹配 customError:自定义验证

accp8.0转换教材第2章初识Mysql

首先安装MySQL: 一.单词部分: ①networking网络②option选择③port端口④firewall防火墙⑤engine引擎 ⑥standard标准⑦character字符⑧collation校对⑨stirage存储 create 创建     drop 删除   comment 评论  variables变量 二.预习部分 1.请写出创建和删除数据库的sql语句 CREATE DATABASE 数据库名; DROP DATABASE 数据库名; 2.写出创建和删除表的sql语句

JavaScript对象及初识面向对象

JavaScript对象及初识面向对象:

JavaScript对象及初识OOP

JavaScript自定义对象 JavaScript构造函数 原型对象 JavaScript继承 原型链 借用构造函数 组合继承 原文地址:https://www.cnblogs.com/xhddbky/p/9208408.html

第六章：Javascript对象

对象是javascript的基本数据类型.对象是一种复合值.它将很多值(原始值 或者其他对象)聚合在一起.可通过名字访问这些值.对象也可以看做是属性的无序集合,每个属性都有一个名/值.属性名是字符串,因此我们可以把对象看成是从字符串到值的映射.这种基本数据结构还有很多叫法,有些我们已经非常熟悉,比如“散列”(hash).“散列表”(hashtable).“字典”(dictionary).“关联数组”(assciativeArray).然而对象不仅仅是字符串到值的映射,除了可以保持的自有的属性,j