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

程序员文章站 2022-04-30 16:19:58

...

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.组合继承的思路是使用原型链实现对原型属性和方法的继承

欢迎提问，欢迎指错，欢迎讨论学习信息有需要的私聊发布评论即可都能回复的

以上就是js中数据类型，对象，构造函数详解的详细内容，更多请关注其它相关文章！

javascript中如何用构造函数创建对象以及子类的继承？