Detailed explanation of 2 inheritance methods of js_javascript skills

js中继承可以分为两种：对象冒充和原型链方式

一、对象冒充包括三种：临时属性方式、call()及apply()方式
1.临时属性方式

复制代码 代码如下:

function Person(name){
     this.name = name;
     this.say = function(){
          alert('My name is '+this.name);
     }
}
function F2E(name,id){
     this.temp = Person;
     this.temp(name);
     delete this.temp;
     this.id = id;
     this.showId = function(){
          alert('Good morning,Sir,My work number is '+this.id);
     }
}
var simon = new F2E('Simon',9527);
simon.say();
simon.showId();

2.call()/apply()方式
实质上是改变了this指针的指向

复制代码 代码如下:

function Person(name){
     this.name = name;
     this.say = function(){
          alert('My name is '+this.name);
     }
}
function F2E(name,id){
     Person.call(this,name); //apply()方式改成Person.apply(this,new Array(name));
     this.id = id;
     this.showId = function(){
          alert('Good morning,Sir,My work number is '+this.id);
     }
}
var simon = new F2E('Simon',9527);
simon.say();
simon.showId();

缺点：先来看这么一张内存分配图：

在OO概念中，new实例化后，对象就在堆内存中形成了自己的空间，值得注意的是，这个代码段。而成员方法就是存在这个代码段的，并且方法是共用的。问题就在这里，通过对象冒充方式继承时，所有的成员方法都是指向this的，也就是说new之后，每个实例将都会拥有这个成员方法，并不是共用的，这就造成了大量的内存浪费。并且通过对象冒充的方式，无法继承通过prototype方式定义的变量和方法，如以下代码将会出错：

复制代码 代码如下:

function Person(name){
     this.name = name;
     this.say = function(){
          alert('My name is '+this.name);
     }
}
Person.prototype.age = 20;
Person.prototype.sayAge = function(){alert('My age is '+this.age)};

function F2E(name,id){
     Person.apply(this,new Array(name));
     this.id = id;
     this.showId = function(){
          alert('Good morning,Sir,My work number is '+this.id);
     }
}

var simon = new F2E('Simon',9527);
simon.sayAge(); //提示TypeError: simon.sayAge is not a function

二、原型链方式

复制代码 代码如下:

function Person(){
     this.name = 'Simon';
}
Person.prototype.say = function(){
     alert('My name is '+this.name);
}

function F2E(id){
     this.id = id;
     this.showId = function(){
          alert('Good morning,Sir,My work number is '+this.id);
     }
}
F2E.prototype = new Person();

var simon = new F2E(9527);
simon.say();
simon.showId();
alert(simon.hasOwnProperty('id')); //检查是否为自身属性

接下来按照上面的例子来理解以下js原型链概念：

The prototype chain can be understood as: each object in js has a hidden __proto__ attribute. The __proto__ attribute of an instantiated object points to the prototype method of its class, and this prototype method can be assigned to another An instantiated object, the __proto__ of this object needs to point to its class, thus forming a chain, that is,

Copy code The code is as follows:

F2E.prototype = new Person()

This sentence is the key. When a js object reads a certain attribute, it will first search for its own attributes. If not, it will then search for the attributes of the object on the prototype chain. In other words, the methods of the prototype chain can be shared, which solves the problem of object impersonation and wasting memory.

Let’s talk about the disadvantages:
The disadvantage is obvious. The prototype chain inheritance means that parameters cannot be passed to the parent class when instantiating the subclass, which is why there is no function Person() in this example. Parameters, but directly written as this.name="Simon". The following code will not achieve the expected results:

Copy the code The code is as follows:

function Person (name){
this.name = name;
}
Person.prototype.say = function(){
alert('My name is ' this.name);
}

function F2E(name,id){
this.id = id;
this.showId = function(){
alert('Good morning,Sir,My work number is ' this .id);
}
}
F2E.prototype = new Person();

var simon = new F2E("Simon",9527);
simon.say( );
simon.showId();


function Person(name){
this.name = name;
}

Person.prototype.say = function(){
alert('My name is ' this.name);
}

function F2E(name,id){
this.id = id;
this.showId = function(){
          alert('Good morning,Sir,My work number is ' this.id);
    }
}

F2E.prototype = new Person( ); //Value cannot be passed here, neither this.name nor name will work. It is possible to directly write F2E.prototype = new Person('wood'), but in this case simon.say() will become My name is wood

var simon = new F2E("Simon",9527);
simon.say(); //Pop up My name is undefined
simon.showId();

Finally, let’s summarize what we think is a better way to implement inheritance. Member variables use object impersonation, and member methods use prototype chaining. The code is as follows:

Copy code The code is as follows:

function Person(name){
this.name = name;
}

Person .prototype.say = function(){
alert('My name is ' this.name);
}

function F2E(name,id){
Person.call(this ,name);
this.id = id;
}

F2E.prototype = new Person();
//Note one detail here, showId cannot be written in F2E.prototype = new Person(); front
F2E.prototype.showId = function(){
alert('Good morning,Sir,My work number is ' this.id);
}

var simon = new F2E("Simon",9527);
simon.say();
simon.showId();