首頁 > web前端 > js教程 > 主體

什麼是js建構函式的方法?

PHP中文网
發布: 2017-06-28 11:46:09
原創
1086 人瀏覽過

下面就為大家帶來一篇淺談js建構子的方法與原型prototype。小編覺得蠻不錯的,現在就分享給大家,也給大家做個參考。

把方法寫在建構子內的情況我們簡稱為函式內方法,把方法寫在prototype屬性上的情況我們簡稱為prototype上的方法。

•函數內的方法: 使用函數內的方法我們可以存取到函數內部的私有變數,如果我們透過建構函式new出來的物件需要我們操作建構子內部的私有變數的話, 我們這個時候就要考慮使用函數內的方法.

•prototype上的方法: 當我們需要透過一個函數創建大量的物件,並且這些物件還都有許多的方法的時候;這時我們就要考慮在函數的prototype上添加這些方法. 這種情況下我們程式碼的記憶體佔用就比較小.

•在實際的應用中,這兩種方法往往是結合使用的;所以我們要先了解我們需要的是什麼,然後再去選擇如何使用


// 构造函数A
function A(name) {
  this.name = name || 'a';
  this.sayHello = function() {
    console.log('Hello, my name is: ' + this.name);
  }
}

// 构造函数B
function B(name) {
  this.name = name || 'b';
}
B.prototype.sayHello = function() {
  console.log('Hello, my name is: ' + this.name);
};

var a1 = new A('a1');
var a2 = new A('a2');
a1.sayHello();
a2.sayHello();

var b1 = new B('b1');
var b2 = new B('b2');
b1.sayHello();
b2.sayHello();
登入後複製

寫了兩個建構子,第一個是A,這個建構子裡麵包含了一個方法sayHello;第二個是建構子B, 我們把那個方法sayHello寫在了建構子B的prototype屬性上面.把方法寫在構造函數的內部,增加了透過構造函數初始化一個物件的成本,把方法寫在prototype屬性上就有效的減少了這種成本. 你也許會覺得,調用對像上的方法要比調用它的原型鏈上的方法快得多,其實並不是這樣的,如果你的那個物件上面不是有很多的原型的話,它們的速度其實是差不多的

另外,需要注意的一些地方:

•首先如果是在函數的prototype屬性上定義方法的話,要牢記一點,如果你改變某個方法,那麼由這個構造函數產生的所有物件的那個方法都會被改變.

•還有一點就是變數提升的問題,我們可以稍微的看一下下面的程式碼:


func1(); // 这里会报错,因为在函数执行的时候,func1还没有被赋值. error: func1 is not a function
var func1 = function() {
  console.log('func1');
};

func2(); // 这个会被正确执行,因为函数的声明会被提升.
function func2() {
  console.log('func2');
}
登入後複製

•關於物件序列化的問題.定義在函數的prototype上的屬性不會被序列化,可以看下面的程式碼:


function A(name) {
  this.name = name;
}
A.prototype.sayWhat = 'say what...';

var a = new A('dreamapple');
console.log(JSON.stringify(a));
登入後複製

我們可以看到輸出結果是{"name":"dreamapple"}

以上是什麼是js建構函式的方法?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!