ホームページ > ウェブフロントエンド > jsチュートリアル > 2 つの JavaScript 継承メソッドの簡単な分析_JavaScript スキル

2 つの JavaScript 継承メソッドの簡単な分析_JavaScript スキル

WBOY
リリース: 2016-05-16 15:27:37
オリジナル
1036 人が閲覧しました

JS の継承方法には主に 2 つあり、1 つはプロトタイプを使用する方法、もう 1 つは call&apply のコンストラクターを借用する方法です。
1. プロトタイプ:

function Body(name,age){// 创建一个Body类
  this.name = name;// 赋予基础属性name、age
  this.age = age;
}
Body.prototype.sayName =function() {// 给原型定义一个sayName的方法
  console.log(this.name);
}
var a = new Body('wutao','10');//创建一个Body的实例对象

function Another(){}
Another.prototype = new Body('www');//将Body实例对象给新创建的子类(Another)的prototype属性,这样,Another就拥有了Body的属性和方法
var b = new Another();//创建Another子类的实例
Another.prototype.sex ="mail";//定义子类的属性及方法
Another.prototype.saySex = function(){
  console.log(this.sex);
}
a.sayName();//wutao
b.sayName();//www 实例b拥有父类Body的方法sayName
b.saySex();//mail 实例b拥有自己定义的方法saySex

ログイン後にコピー

2. コンストラクターの借用 (call&apply) は結合継承としても理解できます
電話:

function Person(name){
  this.name = name;
  this.sayHello = function(){
    console.log(this.name);
  }
}

function Son(name,age){
  Person.call(this,name,age);//call用法:将this指针指向父类构造函数,并依次传入参数,使其拥有父类的属性和方法
  this.age = age;
  this.sayFunc = function(){
    console.log(this.name+"-"+this.age);
  } 
}
var a = new Person('wutao');
var b = new Son("wwwwww",22);
a.sayHello();//wutao
b.sayHello();//wwwwww; 通过call继承来的父类Person的方法sayHello
b.sayFunc();//wwwwww-22

ログイン後にコピー

適用:

function Person(name){
  this.name = name;
  this.sayHello = function(){
    console.log(this.name);
  }
}

function Son(name,age){
  Person.apply(this,[name,age]);//apply用法:类似call,将this指针指向父类构造函数,并传入一个由参数组成的数组参数,使其拥有父类的属性和方法
  this.age = age;
  this.sayFunc = function(){
    console.log(this.name+"-"+this.age);
  } 
}
var a = new Person('wutao');
var b = new Son("ttt",222);
a.sayHello();//wutao
b.sayHello();//ttt;通过apply继承来的父类Person的方法sayHello
b.sayFunc();//ttt-222

ログイン後にコピー

js には主にこの 2 つの継承メソッドしかありません。もちろん、継承メソッドはいくつかありますが、インスタンスを作成した後、インスタンスのメソッドや属性を変更すると、プロトタイプのメソッドや属性が直接変更されてしまいます。そうなると、この継承にはほとんど意味がなく、ビジネスに同様のニーズがない限り使用されないようです。

上記は JavaScript の継承について詳しく説明したもので、皆さんの学習に役立つことを願っています。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート