Home  >  Article  >  Web Front-end  >  5 ways to implement inheritance in js_javascript skills

5 ways to implement inheritance in js_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:28:28954browse

The examples in this article describe 5 ways to implement inheritance in js. Share it with everyone for your reference, the details are as follows:

1. The first way of inheritance: object impersonation

function Parent(username){
  this.username = username;
  this.hello = function(){
   alert(this.username);
  }
}
function Child(username,password){
  //通过以下3行实现将Parent的属性和方法追加到Child中,从而实现继承
  //第一步:this.method是作为一个临时的属性,并且指向Parent所指向的对象,
  //第二步:执行this.method方法,即执行Parent所指向的对象函数
  //第三步:销毁this.method属性,即此时Child就已经拥有了Parent的所有属性和方法 
  this.method = Parent;
  this.method(username);//最关键的一行
  delete this.method;
  this.password = password;
  this.world = function(){
   alert(this.password);
  }
}
var parent = new Parent("zhangsan");
var child = new Child("lisi","123456");
parent.hello();
child.hello();
child.world();

2. The second way of inheritance: call() method

The call method is a method in the Function class
The value of the first parameter of the call method is assigned to this
that appears in the class (i.e. method) The second parameter of the call method begins to be assigned to the parameters accepted by the class (i.e. method)

function test(str){
  alert(this.name + " " + str);
}
var object = new Object();
object.name = "zhangsan";
test.call(object,"langsin");//此时,第一个参数值object传递给了test类(即方法)中出现的this,而第二个参数"langsin"则赋值给了test类(即方法)的str
function Parent(username){
  this.username = username;
  this.hello = function(){
   alert(this.username);
  }
}
function Child(username,password){
  Parent.call(this,username);
  this.password = password;
  this.world = function(){
   alert(this.password);
  }
}
var parent = new Parent("zhangsan");
var child = new Child("lisi","123456");
parent.hello();
child.hello();
child.world();

3. The third way of inheritance: apply() method

The apply method accepts 2 parameters,
A. The first parameter is the same as the first parameter of the call method, that is, assigned to this
that appears in the class (i.e. method) B. The second parameter is an array type. Each element in this array is assigned to the parameter

accepted by the class (i.e. method) in turn.
function Parent(username){ 
  this.username = username; 
  this.hello = function(){ 
   alert(this.username); 
  } 
} 
function Child(username,password){ 
  Parent.apply(this,new Array(username)); 
  this.password = password; 
  this.world = function(){ 
   alert(this.password); 
  } 
} 
var parent = new Parent("zhangsan"); 
var child = new Child("lisi","123456"); 
parent.hello(); 
child.hello(); 
child.world(); 

4. The fourth way of inheritance: prototype chain method , that is, the subclass uses prototype to append all the attributes and methods added through prototype in the parent class to Child, thus realizing inheritance

function Person(){ 
} 
Person.prototype.hello = "hello"; 
Person.prototype.sayHello = function(){ 
  alert(this.hello); 
} 
function Child(){ 
} 
Child.prototype = new Person();//这行的作用是:将Parent中将所有通过prototype追加的属性和方法都追加到Child,从而实现了继承 
Child.prototype.world = "world"; 
Child.prototype.sayWorld = function(){ 
  alert(this.world); 
} 
var c = new Child(); 
c.sayHello(); 
c.sayWorld(); 

5. The fifth way of inheritance: mixed method

Mixed call method and prototype chain method

function Parent(hello){ 
  this.hello = hello; 
} 
Parent.prototype.sayHello = function(){ 
  alert(this.hello); 
} 
function Child(hello,world){ 
  Parent.call(this,hello);//将父类的属性继承过来 
  this.world = world;//新增一些属性 
} 
Child.prototype = new Parent();//将父类的方法继承过来 
Child.prototype.sayWorld = function(){//新增一些方法 
  alert(this.world); 
} 
var c = new Child("zhangsan","lisi"); 
c.sayHello(); 
c.sayWorld();

I hope this article will be helpful to everyone in JavaScript programming.

Statement:
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