IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> JavaScript中类和对象的简介【配套七道习题】 -> 正文阅读

[JavaScript知识库]JavaScript中类和对象的简介【配套七道习题】

1.JS中对象的实现:

  • 定义一个手机对象:
    手机包含两个属性:品牌,价格;
    手机包含两个方法:打电话,发短信。
<script type="text/javascript">

	var phone = {
		brand : "vivo",
		price : 1999,
		call : function(){
			document.write(this.brand + "拨号中" + "<br>");
		},
		message: function(context){
			document.write("正在发短信:" + context + "<br>");
		},
	}
	// 调用对象属性
	document.write(phone.brand + "<br>");
	// 为对象添加属性
	phone.ap = "100血";
	document.write(phone.ap + "<br>");
	
	// 调用对象方法   没有参数
	phone.call();
	// 调用对象方法   有参数
	phone.message("你好!");
	
</script>

在这里插入图片描述

2.JS中类的实现:(使用构造函数去创建类的方法!)

  • 定义一个“人”类:
    具有三个属性:name,age,sex;
    两个方法:eat()和sleep()方法。
<script type="text/javascript">
	function Person(name,age,sex){
		this.name = name;
		this.age = age;
		this.sex = sex;
		this.eat = function(food){
			document.write(this.name + "正在吃" + food + "<br>");
		};
		this.sleep = function(){
			document.write(this.name + "正在睡觉!" + "<br>");
		};
		
	}
	
	// 通过类创建一个p1对象格式:var 对象 = new 类名(参数);
	var p1 = new Person("张三", 28, "男");
	
	// 调用对象属性
	document.write(p1.name + "<br>");
	// 调用对象方法   没参数
	p1.sleep();
	// 调用对象方法   有参数
	p1.eat("香蕉!" + "<br>");
</script>

在这里插入图片描述

3.课后习题

  • 第一题:定义一个猫(Cat)类,猫有name和age属性,有一个catchMouse方法。
  • 第二题:定义一个狗(Dog)类,狗有name和age属性,有一个lookDoor方法。
  • 第三题:定义一个枪(Gun)类,枪有name,ap和price属性,有一个发射子弹的方法fire和一个更换弹夹的方法reload。
  • 第四题:定义一个匕首(Dagger)类,匕首有name,ap和price属性,有攻击方法attack。
  • 第五题:定义一个矩形(Rectangle)类,矩形有x,y,width,height属性,有计算周长的方法perimeter,有计算面积的方法area。
  • 第六题:定义一个圆(Circle)类,圆有x,y,r属性,有计算周长的方法perimeter,有计算面积的方法area。
  • 第七题:定义一个分数(Fraction)类,分数类有分子numerator,分母denominator属性有求和,求差,求乘积,除,约分的方法。
<script type="text/javascript">
		
	// 第一题:定义一个猫(Cat)类,猫有name和age属性,有一个catchMouse方法
	function Cat(name, age){
		this.name = name;
		this.age = age;
		this.catchMouse = function(){
			console.log("抓老鼠ing!");
		};
	}
	var cat = new Cat("汤姆",21);
	console.log(cat.name + "-" + cat.age);
	cat.catchMouse();
	
	
	// 第二题:定义一个狗(Dog)类,狗有name和age属性,有一个lookDoor方法
	function Dog(name,age){
		this.name = name;
		this.age = age;
		this.lookDoor = function(){
			console.log("看门ind!");
		};
	}
	var dog = new Dog("Peter", 22);
	console.log(dog.name);
	console.log(dog.age);
	dog.lookDoor();
	
	// 第三题:定义一个枪(Gun)类,枪有name,ap和price属性,有一个发射子弹的方法fire
	// 和一个更换弹夹的方法reload
	function Gun(name,ap,price){
		this.name = name;
		this.ap = ap;
		this.price = price;
		this.fire = function(){
			console.log(this.name + "正在开枪!");
		};
		this.reload = function(){
			console.log(this.name + "正在换弹夹!");
		};
	};
	var gun = new Gun("冲锋枪", "100血", 9999);
	console.log(gun.name);
	console.log(gun.ap);
	console.log(gun.price);
	gun.fire();
	gun.reload();
	
	// 第四题:定义一个匕首(Dagger)类,匕首有name,ap和price属性,有攻击方法attack
	function Dagger(name,ap,price){
		this.name = name;
		this.ap = ap;
		this.price = price;
		this.attack = function(){
			console.log("正在攻击!");
		};
	};
	var dagger = new Dagger("尼泊尔", "100血", 19999);
	console.log(dagger.name);
	console.log(dagger.ap);
	console.log(dagger.price);
	dagger.attack();
	
	// 第五题:定义一个矩形(Rectangle)类,矩形有x,y,width,height属性,有计算周长
	// 的方法perimeter,有计算面积的方法area
	function Rectangle(x,y,width,height){
		this.x = x;
		this.y = y;
		this.width = width;
		this.height = height;
		this.perimeter = function(){
			var num = this.width * 2 + this.height * 2;
			console.log("周长是" + num);
		};
		this.area = function(){
			var area = this.width * this.height;
			console.log("面积是:" + area);
		};
	};
	var rectangle = new Rectangle(0,0,10,5);
	console.log(rectangle.x);
	console.log(rectangle.y);
	console.log(rectangle.width);
	console.log(rectangle.height);
	rectangle.perimeter();
	rectangle.area();

	// 第六题:定义一个圆(Circle)类,圆有x,y,r属性,有计算周长的方法perimeter,
	// 有计算面积的方法area
	function Circle(x,y,r){
		this.x = x;
		this.y = y;
		this.r = r;
		this.perimeter = function(){
			var num = Math.PI * 2 * r;
			num = Math.round(num);
			console.log("周长是:" + num);
		};
		this.area = function(){
			var area = 1/2 * Math.PI * r * r;
			area = Math.round(area);
			console.log("面积是:" + area);
		}
	};
	var circle = new Circle(0,0,5);
	console.log(circle.x);
	console.log(circle.y);
	console.log(circle.r);
	circle.perimeter();
	circle.area();
	
	// 第七题:定义一个分数(Fraction)类,分数类有分子numerator,分母denominator属性
	// 有求和,求差,求乘积,除,约分的方法
			function Fraction(numerator,denominator){
		this.numerator = numerator;
		this.denominator = denominator;
		this.print = function(){
			console.log(this.numerator + "/" + this.denominator);
		};
		this.add = function(fs1){
			var fz = this.numerator*fs1.denominator + fs1.numerator*this.denominator;
			var fm = this.denominator*fs1.denominator;
			var result = new Fraction(fz,fm);
			return result;
		};
		this.minus = function(fs1){
			var fz = this.numerator*fs1.denominator - fs1.numerator*this.denominator;
			var fm = this.denominator*fs1.denominator;
			var result = new Fraction(fz,fm);
			return result;
		};
		this.product = function(fs1){
			var fz = this.numerator*fs1.numerator;
			var fm = this.denominator*fs1.denominator;
			var result = new Fraction(fz,fm);
			return result;
		};
		this.divide = function(fs1){
			var fz = this.numerator*fs1.denominator;
			var fm = this.denominator*fs1.numerator;
			var result = new Fraction(fz,fm);
			return result;
		};
		// 辗转相除法求分数最大公约数
		this.reduce = function(){
			var fz = this.numerator;
			var fm = this.denominator;
			
			// 辗转相除法
			while(fz % fm != 0){  // 只要分子对分母求余数,余数不等于0,进入循环
				var yushu = fz % fm;
				fz = fm;
				fm = yushu;
			};
			// 循环结束后,fm就是最大公约数
			this.numerator /= fm;
			this.denominator /= fm;
		};
		
	}
	
	var fraction1 = new Fraction(40,60);
	fraction1.print();
	
	var fraction2 = new Fraction(2,6);
	fraction2.print();
	
	// 两个分数求和
	var fraction3 = fraction1.add(fraction2);
	fraction3.print();
	// 两个分数求差
	var fraction3 = fraction1.minus(fraction2);
	fraction3.print();
	// 两个分数求乘积
	var fraction3 = fraction1.product(fraction2);
	fraction3.print();
	// 两个分数求除
	var fraction3 = fraction1.divide(fraction2);
	fraction3.print();
	// 分数约分
	fraction1.reduce();
	fraction1.print();
</script>

在这里插入图片描述

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-05-24 18:03:56  更:2022-05-24 18:05:08 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 19:35:39-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码