Home > Web Front-end > JS Tutorial > What are the inheritance methods in JS?

What are the inheritance methods in JS?

零下一度
Release: 2017-06-28 09:57:39
Original
1034 people have browsed it

1. Prototype chain inheritance

Child.prototype = new Parent();

 1 function Parent (name, age) { 2     this.name = name; 3     this.age = age; 4 } 5 Parent.prototype.say = function(){ 6     console.log('hello, my name is ' + this.name); 7 }; 8 function Child() { 9 }10 Child.prototype = new Parent('pursue');11 var child1 = new Child();12 child1.say(); //hello, my name is pursue13 var child2 = new Child();14 console.log(child1.say === child2.say);//true15 console.log(child1.name === child2.name);//true
Copy after login

2. call(thisObj, param1, param2,...)

 1 function Parent(username){ 2     this.username = username; 3     this.hello = function(){ 4       alert(this.username); 5     } 6   } 7   function Child(username,password){ 8     Parent.call(this,username); 9     this.password = password;10     this.world = function(){11       alert(this.password);12     }13   }14   var parent = new Parent("zhangsan");15   var child = new Child("lisi","123456");16   parent.hello();17   child.hello();18   child.world();
Copy after login

3. apply(thisObj, [param1,param2,...])

 1 function Parent(username){ 2     this.username = username; 3     this.hello = function(){ 4       alert(this.username); 5     } 6   } 7   function Child(username,password){ 8     Parent.apply(this,new Array(username)); 9     this.password = password;10     this.world = function(){11       alert(this.password);12     }13   }14   var parent = new Parent("zhangsan");15   var child = new Child("lisi","123456");16   parent.hello();17   child.hello();18   child.world();
Copy after login

4. Combination inheritance (call+prototype chain/apply+prototype chain)

 1 function Parent(hello){ 2     this.hello = hello; 3   } 4   Parent.prototype.sayHello = function(){ 5     alert(this.hello); 6   } 7   function Child(hello,world){ 8     Parent.call(this,hello);//利用 call 方法 将父类的属性继承过来 9     //Parent.apply(this,new Array(hello));//利用 apply 方法 将父类的属性继承过来10     this.world = world;//新增一些属性11   }12   Child.prototype = new Parent();//将父类的方法继承过来13   Child.prototype.sayWorld = function(){//新增一些方法14     alert(this.world);15   }16   var c = new Child("zhangsan","lisi");17   c.sayHello();18   c.sayWorld();
Copy after login

5. Parasitic combination inheritance, similar to 4, except that the prototype chain Changed to Object.create(Parent.prototype)

 1 function Parent(hello){ 2     this.hello = hello; 3   } 4   Parent.prototype.sayHello = function(){ 5     alert(this.hello); 6   } 7   function Child(hello,world){ 8     Parent.call(this,hello);//利用 call 方法 将父类的属性继承过来 9     //Parent.apply(this,new Array(hello));//利用 apply 方法 将父类的属性继承过来10     this.world = world;//新增一些属性11   }12   Child.prototype = Object.create(Parent.prototype);//将父类的方法继承过来13   Child.prototype.sayWorld = function(){//新增一些方法14     alert(this.world);15   }16   var c = new Child("zhangsan","lisi");17   c.sayHello();18   c.sayWorld();
Copy after login

The above is the detailed content of What are the inheritance methods in JS?. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template