首頁  >  文章  >  web前端  >  解析Javascript中難以理解的11個問題_javascript技巧

解析Javascript中難以理解的11個問題_javascript技巧

WBOY
WBOY原創
2016-05-16 17:10:161246瀏覽

1.原始值與引用值

原始值存放在堆疊中, 引用值存放在堆裡. 如程式:

複製程式碼 程式碼如下:

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

var num = 10;
var bol = true;
var str = "abc";
var obj = new Object();
var arr = ['a','b ','c'];
var person = new Person(100,"笨蛋的座右銘",25);

2.undefined和null

undefined: 變數未定義; 是Undefined類型的專屬值;

null:引用未指派; 是Null類型的專屬值.

typeof(undefined) == undefined;
typeof(null) == object== undefined;undefined!==null;
null instanceof Object == false
undefined instanceof Object == false;

雖然有Undefined和Null類型, 但是透過下面的例子說明這兩個類型是不可見的, 也就是說我們只能使用他們的值:

alert(undefined instanceof Undefined);

alert(null instanceof Null);

3.偽數組

特點:

1) 具有length屬性;

2) 像數組一樣按索引順序訪問資料;

3) 不具備陣列特有的操作資料的方法如push, pop, slice...

偽數組都可以透過Array.prototype.slice轉換為真正的陣列:

var faceArray = {0: 'a', 1: 'b', length: 2}//標準的偽數組;

var realArray = Array.prototype.slice.call(fakeArray);

js中的偽數組:arguments, node.childNodeee,

IE中的問題 : IE中node.childNodes是不能用slice轉換的.

Jquery中的偽數組 : Jquery本身就是一個偽數組:

alert($('.class1').length); alert($('.class1').[0].tagName);

4.關於簡單類型的字面量

var a = 1; b = true, c = "ccc";

字面量看起來有種類

alert(typeof a);//number

alert(typeof b);//boolean

alert(typeof c);//string

但是透過instanceof卻測不出來

alert(a instanceof Number)//false

alert(a instanceof Object)//false

alert(b instanceof Boolean)//false
alert(b instanceof Object)//false
alert(c instanceof String)//false
alert(c instanceof Object)//false

5.函數的prototype屬性與物件實例的內部prototype屬性

每個function(建構子)都有一個prototype屬性, 每個物件實例都有一個不可見的(mozilla把它公開了, 可以透過__proto__來取得)內部的prototype屬性, 它指向建構函數的prototype屬性. prototype還可以有它自己的prototype屬性, 這構成了prototype鏈,  Object是最頂的物件, 所以所有的prototype鏈最終會指向Object.prototype. 當存取物件實例的屬性/方法的時候,從物件實例自己開始搜尋, 若果實搜尋不到, 沿著prototype鏈向上搜尋, 直到Object.prototype.prototype == null 為止.

6.建構子的一個小秘密


複製程式碼複製程式碼
程式碼🎜>
var s = new function(){return "sss"};
alert(s);//[object Object]
s = new function(){return new String("sss" )};
alert(s);//sss

關於這段程式碼的解釋:

只要new 表達式之後的constructor 返回(return)一個引用對象(數組,對象,函數等),都將覆蓋new創建的匿名對象,如果返回(return)一個原始類型(無return 時其實為return原始型別undefined),那麼就傳回new 建立的匿名物件.


7.物件的建立的過程

複製程式碼



複製碼>

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

Person.prototype = {};

var p = new Person('zhangsan');
p の作成プロセスを復号化します:

◦組み込みオブジェクト object obj を作成し、初期化します。

◦ p の内部 [[Prototype]] を Person.prototype;

にポイントします。

◦ p をこのように使用し、引数パラメーターを使用して Person の内部 [[Call]] メソッドを呼び出します。つまり、 Person 関数本体を実行して戻り値が返されない場合は、未定義が返されます。 🎜>

◦前のステップでオブジェクト型が返された場合は、この値を p に返し、そうでない場合は、obj を返します。

8. オブジェクトの所有プロパティと継承プロパティ


コードをコピーします コードは次のとおりです。 🎜 >function person(name){
this.name = name;
}
person.prototype = {
type: 'human',
getName: function ( ){return this.name}
};
var p = new Person('zhangsan');
alert(p.hasOwnProperty('type'));//false
p. type = 'ren';
alert(p.hasOwnProperty('type'));//true


実行結果は非常に明確で、オブジェクトのプロパティはオブジェクトのプロパティを変更できません。プロトタイプ内で同じ名前を使用すると、同じ名前のプロパティ自体が作成され、それに値が割り当てられるだけです。

9. 関数オブジェクトの作成処理

組み込みオブジェクト fn を作成します;

fn の内部 [[Prototype]] を Function.prototype に設定します;

内部 [[Call]] 属性を設定します。これは、関数呼び出しのロジックを処理する内部実装メソッドです。 (関数本体を指すと単純に理解されます);

関数にパラメータがない場合は、fn.length を funArgs.length に設定します。

fn.prototype のコンストラクターは fn 自体を指します。

fn に戻ります

10.instanceof

の原則 a が B のインスタンスであるかどうかを確認するには、B のプロトタイプ (コンストラクターの prototype 属性) が指すオブジェクトが a のプロトタイプ チェーン上にあるかどうかを確認する必要があります。

11. 関数とオブジェクトについての推測

alert(FunctioninstanceofFunction);//truealert(FunctioninstanceofObject);//true

alert(ObjectinstanceofFunction);//true

alert(ObjectinstanceofObject);/ /true

長い間考えてきたけど、まだよく考えていない...

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn