面向对象

fltenwall · fltenwall · commit d9c51c9801af · 2020-07-09T11:27:56.000+08:00
diff --git a/es5实现类的继承.js b/es5实现类的继承.js
@@ -0,0 +1,75 @@
+function Animal(){
+	this.type = "animal";
+
+	//实现抽象类
+	if(new.target === Animal){
+		throw new Error("animal不可被实例化");
+	}
+}
+
+// let animal = new Animal();//报错
+
+Animal.prototype.say = function(){
+	console.log("say..");
+}
+
+//实现父类与子类的继承
+function Tiger(){
+	Animal.call(this);//继承了父类的实例属性和方法
+}
+
+//继承父类原型上的属性和方法
+//（1） Tiger.prototype = Animal.prototype;//指向了同一个原型对象，子类原型的修改会影响到父类原型
+
+/* 
+（2）修改子类的__proto__指向父类的prototype
+	1)因为Tiger与Animal是两个不同的类，且之间没有new的关系，而且在原型上没有__proto__的指向关系，因此需要手动修改Animal类__proto__指向Animal.prototype
+	2)低版本浏览器中可能不识别__proto__
+*/
+
+//Es5中的方法,利用了原型链，将Tiger的原型的原型指向Animal.prototype
+// Tiger.prototype.__proto__ = Animal.prototype;
+
+//ES6中提供的方法
+// Object.setPrototypeOf(Tiger.prototype,Animal.prototype);
+
+/*
+（1）使用Object.create()改变子类的prototype
+（2）这种方式会导致子类指向一个实例对象，而实例对象自身无constructor属性，向上找到父类prototype上的constructor属性,因此需要手动修改子类prototype上constructor的指向
+*/
+
+// Tiger.prototype = Object.create(Animal.prototype); 
+
+//增加constructor指向的参数
+// Tiger.prototype = Object.create(Animal.prototype,{"constructor":{value:Tiger}});
+
+//模拟实现Object.create()
+function create(parentPrototype){
+	let Fn = function(){};
+	//构建一个中间类指向父类，Tiger自身的prototype的属性和方法都写在中间类Fn的prototype上
+	Fn.prototype = parentPrototype;
+	// return new Fn();
+
+	//改进：给实例添加一个constructor的属性，修正constructor的指向
+	let fn = new Fn();
+	fn.constructor = Tiger;
+	return fn;
+}
+
+Tiger.prototype = create(Animal.prototype);
+
+let tiger = new Tiger;
+
+console.log(tiger.type);//animal
+tiger.say();//say..
+console.log(tiger.constructor)//[Function:Animal],修正指向前；[Function:Tiger],修正指向后
+
+//类的静态属性
+Tiger.a = 10;
+console.log(Tiger.a);//10
+
+//类的静态方法
+Tiger.eat = function(){
+	console.log('eat..');
+}
+Tiger.eat();//eat..
diff --git a/es5实现面向对象继承.js b/es5实现面向对象继承.js
@@ -0,0 +1,64 @@
+function Animal(){
+	//成员属性
+	this.type = "animal";
+	//成员方法
+	this.say = function(){
+		console.log('say');
+	}
+	console.log('c');
+};
+
+let animal = new Animal();
+
+//prototype上的方法（公共方法）
+//每一个类上都有一个原型->对象
+Animal.prototype.cat = function(){
+	console.log('a');
+}
+
+//prototype上的属性（公共属性）
+Animal.prototype.num1 = 1;
+console.log(animal.type);
+console.log(animal.hasOwnProperty('type'));
+
+//每一个对象都有一个__proto__属性，指向父类的prototype
+console.log(animal.__proto__ === Animal.prototype);//true
+
+//每个类的prototype都有一个constructor属性，指向该类
+console.log(animal.constructor);//[Function:Animal]
+console.log(animal.__proto__.constructor === animal.constructor );//true
+
+console.log(animal.__proto__.__proto__.__proto__ === null);//true
+console.log(animal.__proto__.__proto__ === Object.prototype);//true
+console.log(Animal.prototype.__proto__ === Object.prototype);//true
+console.log(Object.prototype.__proto__);//null
+
+animal.cat();//a
+animal.say();//say
+
+animal.cat = function(){
+	console.log('cat..');
+}
+animal.cat();//cat..
+
+let animal2 = new Animal();
+animal2.cat();//a
+
+console.log(animal.num1);//1
+
+Animal();//构造函数作为普通函数调用
+
+/*
+
+1.类
+静态属性和静态方法
+（1）静态属性和静态方法能够被实例对象继承，但不能被修改
+
+2.原型（prototype）
+（1）类中的prototype属性指向自己的原型对象（独立空间）
+（2）类的实例对象通过__proto__属性指向类的原型对象，可以通过原型链向上访问原型上的属性和方法，但不能修改原型上的属性和方法
+
+3.实例
+成员属性和成员方法
+
+*/
diff --git a/es6中的面向对象.js b/es6中的面向对象.js
@@ -0,0 +1,83 @@
+class Animal{//es6提供了类，只能new
+	//实现抽象类
+	constructor(){
+
+		// if(new.target === Animal){
+		// 	throw new Error("not new Animal");
+		// }
+
+		//实例上的属性和方法
+		this._type = "animal";
+		this.age = 20;
+	}
+
+	//更改实例属性
+	get type(){
+		//这里的this指向调用者，即实例对象
+		return this._type;
+	}
+
+	set type(newType){
+		this._type = newType;
+	}
+
+	//报错
+	// get age(){
+	// 	return this.age;
+	// }
+
+	//类的原型prototype对象上的方法
+	eat(){
+		console.log('eat..');
+	}
+
+	//类的原型prototype对象上的属性
+	get a(){
+		return 100;
+	}
+
+	//es6中不支持静态属性
+	// static a = 10;//报错
+
+	//静态属性
+	static get num(){
+		return "num";
+	}
+
+	//静态方法
+	static jump(){
+		return "jump.."
+	}
+
+	// a = 1;//实例上的属性，es7中的语法，node环境还无法使用
+}
+
+let animal = new Animal();
+
+//调用原型上的方法
+animal.eat();//eat..
+
+//调用原型上的属性
+console.log(animal.a);//100
+
+//调用类的静态属性和静态方法
+console.log(Animal.num);//num
+console.log(Animal.jump());//jump
+
+//使用get和set修改后的实例属性
+animal.type = "dog";
+console.log(animal.type);//dog
+
+console.log(animal.age);
+
+// Animal();//直接调用报错
+
+//实现class只能new的类似功能
+function Person(){
+
+	if(!(this instanceof Person)){
+		throw new Error("not new");
+	}
+
+};
+// Person();//报错
diff --git a/es6中类的继承.js b/es6中类的继承.js
@@ -0,0 +1,56 @@
+class Animal{//es6提供了类，只能new
+	//实现抽象类
+	constructor(){
+
+		// if(new.target === Animal){
+		// 	throw new Error("not new Animal");
+		// }
+
+		//实例上的属性和方法
+		this._type = "animal";
+		this.age = 20;
+	}
+
+	//类的原型prototype对象上的方法
+	eat(){
+		console.log('eat..');
+	}
+
+	//静态属性
+	static get num(){
+		return "num";
+	}
+
+}
+
+/*
+（1）父类静态属性和静态方法的继承
+Tiger.__proto__ = Animal;//改变Tiger的__proto__指向，修改其父类的原型指向，实现静态属性和静态方法的继承
+（2）父类原型上的属性和实例方法的继承
+Tiger.prototype = Object.create(Animal.prototype);
+（3）父类实例属性和实例方法的继承
+Animal.call(this);
+*/
+class Tiger extends Animal{
+	constructor(){//使用this之前必须调用super
+		//实例属性和实例方法
+		super();//Animal.call(this)
+	};
+
+	static parentNum(){
+		return super.num;//super指向父类自身
+	};
+
+	eat(){
+		super.eat();//super指向父类的原型
+	}
+}
+
+let tiger = new Tiger('tiger1');
+
+//调用实例属性
+console.log(tiger.age);//20
+//调用原型方法
+tiger.eat();//eat..
+//调用静态方法
+console.log(Tiger.parentNum());//num
