ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript オブジェクト指向の記事 (1)

JavaScript オブジェクト指向の記事 (1)

黄舟
リリース: 2017-02-07 14:30:57
オリジナル
919 人が閲覧しました

1 式の概念

広い概念: 返されるすべてのコード ブロックは式になることができます。例:

var a=0;var a, b;
a = 0;这个表达式的返回值为0;
b = a;这个表达式的返回值为a;
ログイン後にコピー

代入式の戻り値は、右側の値です。


2 オブジェクト指向の概念:

プログラミングのアイデア。

問題を解決するときは、まず問題の解決に役立つオブジェクトを見つけてください。

コードの柔軟性が高い。

高いスケーラビリティ

短所:


コードがより複雑になる可能性がある

可読性が比較的低い

3 プロセス指向:


ID: 実行者

シーケンス: 通常の状況では、中断することはできず、上から順に段階的に実行されます

4 Javascript言語の特徴:


弱い型

マルチパラダイム

オブジェクトベースの言語: jsではすべてがオブジェクトです

プロトタイプベースの言語

5 プロトタイプの概念


いわゆるプロトタイプとは、関数のprototype属性によって参照されるオブジェクトです

関数が宣言されている限り、プロトタイプは存在します

function foo(){};
foo.prototype['name']='ksir';
var f = new foo();
console.log(f.constructor ===foo.prototype.constructor);
ログイン後にコピー

この関数を通じて作成されたオブジェクトはこのプロトタイプを共有します。これは、上で作成されたすべてのオブジェクトがプロトタイプ上の任意のメンバー (プロパティとメソッド) に直接アクセスできることを意味します

(オブジェクトの動的特性は、オブジェクトが動的に .or [] にできることです。 create object);


6 プロトタイプの本質


プロトタイプの本質はオブジェクトです

function Person(name,age,gender){
    this.name = name;
    this.age = age;
    this.gender = gender;
    this.talk = function(){
        console.log('hello');
     }
 }
 var kangfeng = new Person('小强',21,'男');
 var xiaoming = new Person('小明',20,'女');
 var xiaohong = new Person('小红','19','女');
 kangfeng.talk();
 xiaoming.talk();
 xiaohong.talk();
 //思考:这三个儿女的talk方法是否一样?
 console.log(xiaoming.talk === kangfeng.talk);
 console.log(xiaohong.talk === xiaohong.talk):
 //这三个对象的方法是不一样,相互独立的
 Person.prototype.addfu(){
    console.log('给原型添加一个函数');
}
ログイン後にコピー

コンストラクターには同じロジックコードが存在し、オブジェクトが作成されると関数がコピーされますコンストラクター内のロジックは、コンストラクター内のメソッドを抽出し、それらをパブリックな場所に置くことです。このパブリックな場所には、コンストラクターによって作成されたオブジェクトからアクセスできます。コンストラクターのすべてのオブジェクトは、コンストラクターのプロトタイプを共有できます。

利点: 類似したオブジェクトのデータ共有を実現

7 プロトタイプを取得する方法

関数を通して:

<fnName>.prototype;
ログイン後にコピー

オブジェクトを通して:

object.__proto__;
//两个下划线
ログイン後にコピー


8 オブジェクトのコンポーネント

オブジェクト自体のプロトタイプ。

すべて オブジェクトには __proto__ 属性があり、すべてのオブジェクトにプロトタイプがあることを意味します

Math.__proto__===object.prototype;
ログイン後にコピー

オブジェクトの型はコンストラクターの名前です


9 プロトタイプ属性とプロトタイプ オブジェクト


プロトタイプ属性: スタンディング関数について オブジェクトの観点から、プロトタイプは関数のプロトタイプ属性と呼ぶことができます

プロトタイプオブジェクト: オブジェクトの観点から、プロトタイプはオブジェクトのプロトタイプオブジェクトと呼ぶことができます

10 __proto__二重下線標準


__proto_ _この二重下線標準は w3c 標準ではなく、これらの属性は非標準属性です。


互換性の問題があります。二重アンダースコアでプロトタイプ属性を取得できない場合は、関数

function getPrototype(obj){
    //判断浏览器是否兼容__proto__属性
    //return !!obj.__proto__? obj.__proto__:obj.constructor.prototype;
    if(obj.__proto__){
    //支持
        return obj.__proto__;
    }else{
        //获取该对象的构造函数
        //在通过此函数的prototype属性获取其原型对象
        return obj.constructor.prototype;
    }
}
function A(){};
var a = A();
console.log(getPrototype(a).constructor);
//如果我们的函数中有if else return结构,我们可以用3元运算符来优化.
ログイン後にコピー

11 を使用して取得する必要があります。 標準コンストラクターの書き方 //どの属性をコンストラクター内に保存し、どの属性を抽出する必要があるかそれをプロトタイプに追加します


function B(name){};
B.prototype.name = &#39;tom&#39;;
var tom = new B;console.log(tom.name);
var jim = new jim;console.log(jim.name);
//结果都是tom
//所以和具体某个对象息息相关的称为私有属性,这写属性都必须写在构造函数内,那些共享的属性(每个对象都具有的属性,不会随对象变化而变化,
比如说一些方法(对象的行为)--公有属性)就可以定义在原型属性中.
//一般情况下,构造函数的方法放原型上
//不提倡在js原生对象上进行扩展成员
//坏处,会导致原生对象过于庞大,累赘,影响性能
ログイン後にコピー

12 注

コンストラクターへのメソッドの追加は、通常、便宜上、オブジェクトの形式で .prototype{ } に追加されます。同時に、コンストラクター: コンストラクター関数名をキーと値のペアの形式で追加することを忘れないでください。


13 プロトタイプの特徴


ダイナミクス:

プロトタイプへのメンバーの拡張は、作成されたオブジェクトに直接反映されます


プロトタイプ オブジェクトの置き換えは、作成されたオブジェクトには反映されませんが、直接影響します 作成されたオブジェクトその後

一意性

同じ関数によって作成されたすべてのオブジェクトは同じプロトタイプオブジェクトを共有します

不変性:

オブジェクトはプロトタイプオブジェクトのメンバーを変更できません

継承:

すべてのオブジェクトはプロトタイプオブジェクトから継承します

上記は Javascript オブジェクト指向の記事 (1) の内容です。さらに関連する内容については、PHP 中国語 Web サイト (www.php.cn) に注目してください。

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