JS - 面向对象

目录

1、属性与方法(增删改查)

2、类字典:不存在字典的概念,却模拟字典的实现

3、构造函数(ES5):实现多个相似类的创造

4、继承(ES5)(存在知识点模糊???)

- 组合继承(构造继承属性,原型继承方法)

5、类及继承(ES6)


1、属性与方法(增删改查)

注意:

  • 属性的创建有两种方式,但是想要支持 “-” 语法 必须使用 [“”] 
    例如:abc-123 必须使用 [“abc-123”] 进行创造和访问。
  • 出现的访问有两种方式,除非存在 -,可以互相任意使用
    例如:obj.a = 123  ===>>> obj.a 、obj["a"]
//创建对象的两种方式
var obj = {}; 
var obj = new Object();

//对象的属性,两种方式
obj.prop = "";
obj["age-0"] = 15

// 对象的方法
obj.func = function () {……}


// 对象属性和方法的访问方式
obj.prop
obj.func()
obj["age-0"]

// 对象属性和方法的修改
obj.prop = "new"

// 属性与方法删除
delete obj.prop
delete obj.func
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>面向对象初始</title>
</head>
<body>
</body>
<script type="text/javascript">
	// 创建一个空对象
	var obj = {}
	// 对空对象进行添加属性
	obj.name = "大毛";21
	obj["age"] = 18;
	
	// 打印对象
	console.log(obj);

	// 使用属性
	console.log(obj["name"]);
	console.log(obj.age);
	console.log(obj["age"]);

	// 对对象添加方法
	obj.eat = function () {
		console.log("吃吃吃!!!");
	}
	// 方法的使用
	obj.eat();

	// 属性|方法的移除
	delete obj.name

	console.log(obj);

</script>
</html>

 

2、类字典:不存在字典的概念,却模拟字典的实现

 总结:

  1.     key全为字符串形式,存在两种书写方式, name || “name”
  2.     当key为js标识符不支持的语法情况下,必须添加引号。例如:字符串中存在 -,“abc-123”
  3.     value可以为任意类型
  4.     值存在两种访问方式:字典名.key || 字典名["key"] ; 注意“.”的使用
  5.     可以随意添加 key:value的键值对 完成增删改查
//dict.name | dict["my-name"] | dict.fn()

var dict = {
	key1: "value1",
	key2: 18,
	"my-key3": [1, 2, 3, 4, 5]
}
var dict_1 = {
    "my-name": "zero", 
    fn: function () {}, 
    fun () {}
}

// 增
dict.key4 = true;
console.log(dict);

// 删
delete dict.key4;
console.log(dict);

// 改
dict["my-key3"] = [5, 4, 3, 2, 1];
console.log(dict);

// 查
console.log(dict.key1);
console.log(dict["key1"]);

3、构造函数(ES5):实现多个相似类的创造

注意:

  • 构造函数,命名通常采用首字母大写的大驼峰写法
  • 内部构建属性和方法的时候,使用this关键词
  • 构造函数可以创建多个实例对象,但通过{}普通构造出来的对象是唯一的。例如: var obj = {}
//创建构造函数
function People(name, age) {
    this.name = name;
    this.age = age;

    this.eat = function () {
        return 'eat';
    }
}

//创建实例
var p1 = new People("zero");
var p2 = new People("seven");

//调用实例内属性和方法
console.log(p1.name)
console.log(p2.age)
p1.eat()

//查看实例对象
console.log(p1);
console.log(p1);

 

4、继承(ES5)(存在知识点模糊???)

- 组合继承(构造继承属性,原型继承方法)

注意:

  • 必须存在两个构造函数才可以完成继承。
  • 继承是属性和方法的复用
  • 创建子类实例时,可以向父类构造函数传参
  • call方法用来完成属性的继承
    (继承过程中,子类调用call方法,传入父类的this和子类传入的参数)
  • prototype原型用于继承方法
// 父级
function Sup(name) {
    this.name = name;
    this.fn = function () {
        console.log('fn class');
    }
}

// 子级
function Sub(name) {
    // 继承属性
    Sup.call(this, name);
}
// 继承方法
Sub.prototype = new Sup;

// 创建子级对象
var sub = new Sub("subClass");
// 使用属性
console.log(sub.name);
// 使用方法
sub.fn();
​
// 指向自身构造函数
Sub.prototype.constructor = Sub;

5、类及继承(ES6)

注意:

  • 构造器 constructor 
  • 子类通过 子类名 extends 父类名{} 进行继承操作
            class Person {
		// 构造器:创建对象完成初始化操作
	    constructor (name, age) {
	        this.name = name;
	        this.age = age;
	    }
	    // 实例方法:只能由对象调用
	    eat () {
	        console.log(this.name + '吃吃吃');
	    }
	    // 类方法:只能由类调用
	    static create () {
	        console.log('诞生');
	    }
	}
	let p1 = new Person('zero', 8);
	let p2 = new Person('seven', 58);

	console.log(p1.age);
	p2.eat();
	// Person.eat();
	Person.create();
	// p2.create();


	// 继承
	class Student extends Person {
		constructor (name, age, sex) {
			// super指向父级
			super(name, age);
			this.sex = sex;
		}
	}

	let s1 = new Student("张三", 18, "男");
	// 属性的继承
	console.log(s1.name, s1.age, s1.sex);
	console.log();
	// 方法的继承
	s1.eat();
	// 继承为全继承
	Student.create();
 

猜你喜欢

转载自blog.csdn.net/qq_33961117/article/details/83090197
今日推荐