js中数据类型，对象，构造函数详解-js教程-PHP中文网

js中数据类型，对象，构造函数详解

零下一度

发布： 2017-07-02 09:20:25

原创

1997人浏览过

javascript数据类型，对象，构造函数，原型对象，初识原型链，对象继承

一.单词部分

①object父类②constructor构造函数③instance实例④call调用

⑤apply应用⑥combination组合⑦inheritance继承

二.预习部分

1.简述创建对象的两种方法，以及两者的区别

new 和字面量赋值

前者要用点.添加属性和方法

后者直接调用

2.简述使用构造函数创建实例的步骤

①创建一个新对象

②将构造函数的作用域赋值给新对象

③执行构造函数代码块

④返回新对象

3.简述原型链在继承中的作用

它是实现继承的主要方法

三.上机部分

1.创建person对象


	lang="en">

	charset="UTF-8">
	创建person对象<span class="html-tag"></span>




	id="aa">
	<script> </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+" 年龄："+this.age+" 工作："+this.job+" 住址："+this.address;
	//document.write(strr);
	document.getElementById("aa").innerHTML=strr;
	}
	person.info();

2.创建person构造函数


	lang="en">

	charset="UTF-8">
	上机练习二<span class="html-tag"></span>


	id="aa">
	<script> </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+" 年龄："+this.age+" 工作："+this.job+" 住址："+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+" 年龄："+this.age1+" 工作："+this.job1+" 住址："+this.address1;
	document.getElementById("aa").innerHTML=strrr;
	}
	var one=new Pers();
	one.showinn();
	//newper.show();

3.创建person对象原型链


	lang="en">

	charset="UTF-8">
	上机练习三<span class="html-tag"></span>


	id="aa">
	<script> </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();

4.创建继承person的student子类


	lang="en">

	charset="UTF-8">
	上机练习四<span class="html-tag"></span>


	id="aa">
	<script> </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();*/