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