Several methods of inheriting and creating objects in JavaScript

Inheritance in JS

In some way, let one object inherit the properties and methods of another object.
1. Prototype chain inheritance (there are two ways to achieve it)

(1)Chid.prototype = Parent.prototype

Disadvantages: Chid.prototype.constructor points to the Parent and needs to be manually changed to Chid.

(2) Child.prototype = new Parent()
makes the prototype object of the subclass point to the parent object.
Disadvantage: Chid.prototype.constructor points to the Parent, which needs to be manually changed to Chid.

<script>
	child.prototype = new Parent ;//这之后可以访问到父类的公有和私有属性
</script>

2. Call inheritance (only the private attributes of the parent class can be inherited)

<script>
	Parent.call(this);//其中this指向空对象  此代码会让Parent的this也指向这个空对象,从而可以访问到Parent的私有属性
</script>

3. Combined inheritance (subclasses can inherit the private and public properties of the parent class)

<script>
	Parent.call(this);//继承私有属性
	Child.prototype = Object.creat(Parent.prototype);//让子类的原型对象指向父类的原型对象 只不过用的是通过Object.creat又克隆的一份,这样可以避免增添属性造成的错误
	Child.prototype.constructor = Child;//可以手动指向一下,避免代码出错
</script>

4. Inheritance
super in ES6 : similar to call inheritance, only private attributes can be inherited.
extends: similar to public inheritance

<script>
	class Parent{
     
     
	constructor(){
     
     
	this.a=1;
			}
	}
	class Child extends Parent{
     
     
	constructor(){
     
     
	super();
	this.b=2;
			}
	}
</script>

Methods of creating objects in JS

1. Create objects literally (disadvantages: the initialized values ​​are the same, advantages: sharing can be achieved)

<script>
	let obj = {
     
     
	name:"wc";
	age"12;
	weight:this.age+10;//这个this表示window 
	}
	console.log(obj.weight)//NaN
</script>

Note: In an object method, if there is this, the this in the method refers to the object when called through this object.
2. Use the factory pattern to create objects (many objects can be generated, and objects can be created in batches)

<script>
	function creatRect(w,h){
     
     
	var obj = {
     
     };
	obj.width = w ;
	obj.height = h ;
	obj.getS = function(){
     
     
	return this.width * this.height ;
		}
	return obj;
	}
	var rect1 =creatRsct(1,2);
	console.log(rect1.getS());
	varr rect2 = creatRect(3,4);
	console.log(rect2.getS());
</script>

3. Create through the constructor Create
an object through a new constructor

<script>
	var rect1 = new Rect(1,2);
</script>

4. Create through the constructor + prototype object
Add some properties on the prototype object

<script>
	function Rect(w,h){
     
     
	this.w = w ;
	this.h = h ;
	}
	Rect.prototype.getS = function(){
     
     
	return this.w;
	}
	var rect1 = new Rect(1,2);
</script>

5. Classes are created by class in ES6

<script>
	class Rect{
     
     
	constructor(w,h){
     
     
		this.w = w ;//私有属性
		this.h = h ;
		}
		yy = 123 ;//私有属性 
		getS(){
     
     //公有属性
		return this.w +this.h;
		}
		static xx = 10;//静态变量 类上的属性 需要通过类名来访问
	}
	var rect1 = new Rect(4,2);
	console.log(Rect.xx);//10
</script>

Guess you like

Origin blog.csdn.net/Fairyasd/article/details/107583200