【JavaScript】对象类的创建和使用理解

JavaScript语言和其它主流编程语言一样,是可以创建对象的,对象有构造方法,还有属性和调用方法,有私有的也有公开的,下面有讲如何写定义

  1. 写一个对象文件,例如,猫 ./common/lib/cat.js 代码如下
export default class Cat {
	
	//---------以下带#都是定义私有的属性和方法 外部不能访问和修改 类似其它语言的private _
	#name = name || "猫";
	#content = "hello";
	#location = { x:0, y:0 };
	
	/**
	 * 移动位置的方法 外部不能调用 private
	 * @param {Integer} x
	 * @param {Integer} y
	 */
	#moveLocation = (x,y) => {
		this.#location.x = x;
		this.#location.y = y;
	}
	
	//---------以下都是定义公开的属性和方法 类似其它语言的public
	// state = '11';
	// color = 'black';
	// _prop = 'public';
		
	/*
	* 这是构造方法 new Object() 会自动调用
	* @param { String } name 可传参 猫的名字
	*/
	constructor(name){
		//---------带# 私有的属性 可修改
		this.#name = name || "黑猫";
		
		//---------以下都是定义公开的属性和方法 供外部访问和调用 类似其它语言的public
		this.state = '11';
		this.color = 'black';
		this._prop = 'public';
		
		// 获取猫所在的位置
		this.getLocation = () => {
			return this.#location;
		}
		//上面带=>箭头是简写的 省略了function 原来如下
		//this.getLocation = function () {
		//	return this.#location;
		//}
	}
	
	//---------以下都是公开的方法 供外部调用 public
	
	/**
	 * 猫叫
	 * */
	call(){
		console.log('cat '+this.#name+' say '+this.#content);
	}
	
	
	/**
	 * 指定位置方法 public
	 * @param { Integer } x
	 * @param { Integer } y
	 * */
	toLocation(x,y){
		this.#moveLocation(x,y);
	}
	
	/**
	 * 获取猫的名字
	 * @return { String }
	 * */
	getName(){
		return this.#name;
	}
	
	/**
	 * 获取猫的声音内容
	 * @return { String }
	 * */
	getContent(){
		return this.#content;
	}
	
	/**
	 * 设置猫的声音内容
	 * @param { String } content
	 * */
	setContent(content){
		this.#content = content;
	}
}
  1. 导入对象运用

在需要使用的代码中,写相对路径中的cat.js 文件正确导入import即可创建对象,代码如下

import Cat from "./common/lib/cat.js";

export default {
	//...
	mounted(){
		//创建对象猫 实例
		let cat = new Cat('Tom');
		
		//调用对象的方法
		cat.call();
		
		//打印日志输出
		console.log("cat object",cat);
		
		//测试报告
		// console.log("cat object test 1",cat.name);//私有属性无法访问
		// console.log("cat object test 2",cat.state);
		// console.log("cat object test 3",cat.moveLocation());//私有方法无法调用
		// console.log("cat object test 4",cat.getLocation());
	}
	//...
}

创建对象的步骤很简单,与其它编程语言不同的是,会发现这里import * from *引用前需要去加export default代码,记住就对了,就讲到这里,如还有什么不清楚的,请在结尾处留言

💡 请注意

  • 文章中代码使用了 Vue技术写法,建议学习
  • JavaScript 需要支持 ES5 以上语法
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

TA远方

谢谢!收到你的爱╮(╯▽╰)╭

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值