คุณสมบัติที่ซ่อนของ JavaScript? [ปิด]

"คุณสมบัติที่ซ่อนอยู่" ของ JavaScript อะไรที่คุณคิดว่าโปรแกรมเมอร์ทุกคนควรรู้

หลังจากที่ได้เห็นคุณภาพที่ยอดเยี่ยมของคำตอบสำหรับคำถามต่อไปนี้ฉันคิดว่ามันถึงเวลาถาม JavaScript แล้ว

• คุณสมบัติที่ซ่อนของ HTML
• คุณสมบัติที่ซ่อนของ CSS
• คุณสมบัติที่ซ่อนของ PHP
• คุณสมบัติที่ซ่อนของ ASP.NET
• คุณสมบัติที่ซ่อนของ C #
• คุณสมบัติที่ซ่อนของ Java
• คุณสมบัติที่ซ่อนของ Python

แม้ว่า JavaScript จะเป็นภาษาฝั่งไคลเอ็นต์ที่สำคัญที่สุดในตอนนี้ (เพียงแค่ถาม Google) มันน่าประหลาดใจที่นักพัฒนาเว็บส่วนใหญ่น้อยชื่นชมความแรงของมัน

คุณไม่จำเป็นต้องกำหนดพารามิเตอร์ใด ๆ สำหรับฟังก์ชั่น คุณสามารถใช้argumentsวัตถุคล้ายอาร์เรย์ของฟังก์ชัน

function sum() {
    var retval = 0;
    for (var i = 0, len = arguments.length; i < len; ++i) {
        retval += arguments[i];
    }
    return retval;
}

sum(1, 2, 3) // returns 6

ฉันสามารถอ้างอิงส่วนใหญ่ของหนังสือยอดเยี่ยมของ Douglas Crockford ได้ JavaScript: The Good Partsส่วนดี

แต่ฉันจะเอาแค่อันเดียวสำหรับคุณใช้เสมอ===และ!==แทน==และ!=

alert('' == '0'); //false
alert(0 == ''); // true
alert(0 =='0'); // true

==ไม่ใช่สกรรมกริยา หากคุณใช้===มันจะให้เท็จสำหรับงบเหล่านี้ทั้งหมดตามที่คาดไว้

ฟังก์ชั่นเป็นพลเมืองชั้นหนึ่งใน JavaScript:

var passFunAndApply = function (fn,x,y,z) { return fn(x,y,z); };

var sum = function(x,y,z) {
  return x+y+z;
};

alert( passFunAndApply(sum,3,4,5) ); // 12

เทคนิคการเขียนโปรแกรมฟังก์ชั่นที่สามารถใช้ในการเขียนจาวาสคริปต์ที่สง่างาม

โดยเฉพาะอย่างยิ่งฟังก์ชั่นสามารถส่งผ่านเป็นพารามิเตอร์เช่นArray.filter ()ยอมรับการเรียกกลับ:

[1, 2, -1].filter(function(element, index, array) { return element > 0 });
// -> [1,2]

คุณสามารถประกาศฟังก์ชั่น "ส่วนตัว" ที่มีอยู่ภายในขอบเขตของฟังก์ชั่นเฉพาะ:

function PrintName() {
    var privateFunction = function() { return "Steve"; };
    return privateFunction();
}

คุณสามารถใช้ตัวดำเนินการinเพื่อตรวจสอบว่ามีกุญแจอยู่ในวัตถุหรือไม่:

var x = 1;
var y = 3;
var list = {0:0, 1:0, 2:0};
x in list; //true
y in list; //false
1 in list; //true
y in {3:0, 4:0, 5:0}; //true

หากคุณพบว่าตัวอักษรวัตถุน่าเกลียดเกินไปคุณสามารถรวมเข้ากับคำแนะนำฟังก์ชันแบบไม่มีพารามิเตอร์ได้:

function list()
 { var x = {};
   for(var i=0; i < arguments.length; ++i) x[arguments[i]] = 0;
   return x
 }

 5 in list(1,2,3,4,5) //true

การกำหนดค่าเริ่มต้นให้กับตัวแปร

คุณสามารถใช้โลจิคัลหรือโอเปอเรเตอร์||ในนิพจน์การกำหนดค่าเพื่อให้ค่าเริ่มต้น

var a = b || c;

aตัวแปรจะได้รับค่าของcเฉพาะในกรณีที่bเป็นfalsy (ถ้าเป็นnull, false, undefined, 0,empty stringหรือNaN) มิฉะนั้นaจะได้รับค่าของbจะได้รับค่าของ

สิ่งนี้มักจะมีประโยชน์ในฟังก์ชั่นเมื่อคุณต้องการที่จะให้ค่าเริ่มต้นให้กับข้อโต้แย้งในกรณีที่ไม่ได้ให้:

function example(arg1) {
  arg1 || (arg1 = 'default value');
}

ตัวอย่าง IE fallback ในตัวจัดการเหตุการณ์:

function onClick(e) {
    e || (e = window.event);
}

คุณลักษณะด้านภาษาต่อไปนี้อยู่กับเรามาเป็นเวลานานการใช้งาน JavaScript ทั้งหมดสนับสนุนพวกเขา แต่พวกเขาไม่ได้เป็นส่วนหนึ่งของข้อกำหนดจนกระทั่ง ECMAScript 5th Edition :

debuggerคำสั่ง

อธิบายไว้ใน: § 12.15 คำสั่งดีบักเกอร์

คำสั่งนี้อนุญาตให้คุณใส่จุดสั่งหยุดแบบเป็นโปรแกรมในรหัสของคุณเพียงแค่:

// ...
debugger;
// ...

หากมีการดีบั๊กหรือมีการใช้งานมันจะทำให้มันแตกทันทีทันทีบนบรรทัดนั้น

มิเช่นนั้นถ้าตัวดีบั๊กไม่มีอยู่หรือใช้งานคำสั่งนี้จะไม่มีผลที่สังเกตได้

Multiline String ตัวอักษร

อธิบายไว้ใน: § 7.8.4 ตัวอักษรสตริง

var str = "This is a \
really, really \
long line!";

คุณต้องระวังเพราะตัวละครที่อยู่ถัดจาก\ ต้องเป็นตัวยุติบรรทัดหากคุณมีช่องว่างหลังจาก\ตัวอย่างรหัสจะมีลักษณะเหมือนกันSyntaxErrorทุกประการแต่จะเพิ่มขึ้น

จาวาสคริปต์ไม่มีขอบเขตบล็อก (แต่มันปิดดังนั้นขอเรียกมันด้วยเหรอ?)

var x = 1;
{
   var x = 2;
}
alert(x); // outputs 2

คุณสามารถเข้าถึงคุณสมบัติของวัตถุได้ด้วย[]แทนที่จะเป็น.

สิ่งนี้อนุญาตให้คุณค้นหาคุณสมบัติที่ตรงกับตัวแปร

obj = {a:"test"};
var propname = "a";
var b = obj[propname];  // "test"

คุณยังสามารถใช้สิ่งนี้เพื่อรับ / ตั้งค่าคุณสมบัติของวัตถุที่มีชื่อไม่ใช่ตัวระบุทางกฎหมาย

obj["class"] = "test";  // class is a reserved word; obj.class would be illegal.
obj["two words"] = "test2"; // using dot operator not possible with the space.

บางคนไม่รู้เรื่องนี้และจบลงด้วยการใช้eval ()เช่นนี้ซึ่งเป็นความคิดที่ไม่ดีจริงๆ :

var propname = "a";
var a = eval("obj." + propname);

นี่เป็นการยากที่จะอ่านและยากที่จะหาข้อผิดพลาดใน (ไม่สามารถใช้ jslint), ช้ากว่าในการดำเนินการและสามารถนำไปสู่การหาประโยชน์ XSS

หากคุณเป็น Google สำหรับการอ้างอิง JavaScript ที่ดีในหัวข้อที่กำหนดให้ใส่คำหลัก "mdc" ในการสืบค้นของคุณและผลลัพธ์แรกของคุณจะมาจาก Mozilla Developer Center ฉันไม่ได้พกหนังสืออ้างอิงหรือออฟไลน์ใด ๆ ติดตัวไปด้วย ฉันมักจะใช้เคล็ดลับคำหลัก "mdc" เพื่อไปที่สิ่งที่ฉันกำลังมองหาโดยตรง ตัวอย่างเช่น:

Google: javascript เรียงลำดับอาร์เรย์ mdc
(ในกรณีส่วนใหญ่คุณอาจละเว้น "javascript")

ปรับปรุง: Mozilla ผู้พัฒนาศูนย์ได้รับการเปลี่ยนชื่อ Mozilla ผู้พัฒนาเครือข่าย "การ MDC" เคล็ดลับคำหลักที่ยังคงทำงานได้ แต่ไม่นานพอที่เราอาจจะต้องเริ่มใช้ "MDN" แทน

อาจเห็นได้ชัดเล็กน้อยสำหรับบางคน ...

ติดตั้งFirebugและใช้ console.log ("hello") ดีกว่าการใช้การเตือนแบบสุ่ม (); ซึ่งฉันจำได้ว่าทำไม่กี่ปี

วิธีการส่วนตัว

วัตถุสามารถมีวิธีการส่วนตัว

function Person(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;

    // A private method only visible from within this constructor
    function calcFullName() {
       return firstName + " " + lastName;    
    }

    // A public method available to everyone
    this.sayHello = function () {
        alert(calcFullName());
    }
}

//Usage:
var person1 = new Person("Bob", "Loblaw");
person1.sayHello();

// This fails since the method is not visible from this scope
alert(person1.calcFullName());

ยังกล่าวถึงใน "Javascript: The Good Parts" ของ Crockford:

parseInt()อันตราย. หากคุณผ่านสตริงโดยไม่แจ้งให้ทราบถึงฐานที่ถูกต้องมันอาจส่งคืนหมายเลขที่ไม่คาดคิด ตัวอย่างเช่นparseInt('010')คืนค่า 8 ไม่ใช่ 10 การส่งผ่านฐานไปยัง parseInt ทำให้ทำงานได้อย่างถูกต้อง:

parseInt('010') // returns 8! (in FF3)
parseInt('010', 10); // returns 10 because we've informed it which base to work with.

ฟังก์ชั่นเป็นวัตถุจึงสามารถมีคุณสมบัติ

fn = function (x) {
   // ...
}

fn.foo = 1;

fn.next = function (y) {
  //
}

ฉันต้องบอกว่าฟังก์ชั่นการทำงานด้วยตนเอง

(function() { alert("hi there");})();

เนื่องจาก Javascript ไม่มีขอบเขตบล็อกคุณสามารถใช้ฟังก์ชันการดำเนินการด้วยตนเองหากคุณต้องการกำหนดตัวแปรในเครื่อง:

(function() {
  var myvar = 2;
  alert(myvar);
})();

ที่นี่myvarจะไม่รบกวนหรือก่อให้เกิดมลพิษทั่วโลกขอบเขตและหายไปเมื่อฟังก์ชั่นยุติ

รู้ว่าฟังก์ชั่นที่ต้องการคือพารามิเตอร์จำนวนเท่าใด

function add_nums(num1, num2, num3 ){
    return num1 + num2 + num3;
}
add_nums.length // 3 is the number of parameters expected.

รู้ว่าฟังก์ชั่นได้รับพารามิเตอร์จำนวนเท่าใด

function add_many_nums(){
    return arguments.length;
}    
add_many_nums(2,1,122,12,21,89); //returns 6

นี่คือสิ่งที่น่าสนใจ:

• เปรียบเทียบNaNกับสิ่งที่ (แม้NaN) อยู่เสมอเท็จที่มี==, และ<>
• NaN ไม่ใช่แทนจำนวน แต่ถ้าคุณถามหาประเภทมันจะคืนค่าจำนวนจริง
• Array.sort สามารถใช้ฟังก์ชั่นเปรียบเทียบและเรียกใช้โดยไดรเวอร์ที่คล้ายกันอย่างรวดเร็ว
• นิพจน์ปกติ "ค่าคงที่" สามารถรักษาสถานะเช่นเดียวกับสิ่งสุดท้ายที่พวกเขาจับคู่
• บางรุ่นของ JavaScript ช่วยให้คุณสามารถเข้าถึง$0, $1, $2สมาชิกนิพจน์ทั่วไป
• nullไม่เหมือนสิ่งอื่นใด มันเป็นค่าวัตถุบูลีน, undefinedหมายเลขสตริงหรือ เป็นบิตเช่น undefined"สำรอง" (หมายเหตุ: typeof null == "object")
• ในบริบทนอกสุดthisให้ผลตอบแทนวัตถุ [Global] ที่ไม่สามารถระบุได้
• การประกาศตัวแปรด้วยvarแทนที่จะพึ่งการประกาศอัตโนมัติของตัวแปรนั้นจะช่วยให้รันไทม์มีโอกาสที่แท้จริงในการเพิ่มประสิทธิภาพการเข้าถึงตัวแปรนั้น
• สิ่งwithก่อสร้างจะทำลายการเพิ่มประสิทธิภาพเช่นนั้น
• ชื่อตัวแปรสามารถมีอักขระ Unicode
• นิพจน์ทั่วไปของ JavaScript ไม่ได้เป็นจริงตามปกติ มันขึ้นอยู่กับ regex ของ Perl และเป็นไปได้ที่จะสร้างนิพจน์ด้วย lookaheads ที่ใช้เวลานานมากในการประเมิน
• breakบล็อกสามารถระบุและใช้เป็นเป้าหมายของ continueลูปสามารถระบุและใช้เป็นเป้าหมายของ
• อาร์เรย์ไม่กระจัดกระจาย การตั้งค่าองค์ประกอบ 1000 undefinedของอาร์เรย์ที่ว่างเปล่ามิฉะนั้นควรกรอกด้วย (ขึ้นอยู่กับการใช้งาน)
• if (new Boolean(false)) {...} จะดำเนินการ{...}บล็อก
• เอ็นจิ้นนิพจน์ทั่วไปของ Javascript นั้นใช้งานเฉพาะ: เช่นมันเป็นไปได้ที่จะเขียนนิพจน์ปกติ "ไม่พกพา"

[อัพเดทเล็กน้อยเพื่อตอบสนองต่อความคิดเห็นที่ดี; โปรดดูความคิดเห็น]

ฉันรู้ว่าฉันมางานปาร์ตี้ช้า แต่ฉันไม่อยากจะเชื่อเลยว่า+ประโยชน์ของผู้ปฏิบัติงานไม่ได้ถูกกล่าวถึงนอกเหนือไปจาก "แปลงอะไรเป็นตัวเลข" บางทีนั่นอาจจะเป็นวิธีที่ซ่อนคุณสมบัติได้ดี?

// Quick hex to dec conversion:
+"0xFF";              // -> 255

// Get a timestamp for now, the equivalent of `new Date().getTime()`:
+new Date();

// Safer parsing than parseFloat()/parseInt()
parseInt("1,000");    // -> 1, not 1000
+"1,000";             // -> NaN, much better for testing user input
parseInt("010");      // -> 8, because of the octal literal prefix
+"010";               // -> 10, `Number()` doesn't parse octal literals 

// A use case for this would be rare, but still useful in cases
// for shortening something like if (someVar === null) someVar = 0;
+null;                // -> 0;

// Boolean to integer
+true;                // -> 1;
+false;               // -> 0;

// Other useful tidbits:
+"1e10";              // -> 10000000000
+"1e-4";              // -> 0.0001
+"-12";               // -> -12

แน่นอนคุณสามารถทำสิ่งนี้ทั้งหมดโดยใช้Number()แทน แต่+ผู้ประกอบการสวยกว่ามาก!

นอกจากนี้คุณยังสามารถกำหนดค่าที่ส่งคืนเป็นตัวเลขสำหรับวัตถุโดยการแทนที่valueOf()วิธีของต้นแบบ การแปลงตัวเลขใด ๆ ที่ทำกับวัตถุนั้นจะไม่ส่งผลNaNแต่จะส่งคืนค่าของvalueOf()วิธีการ:

var rnd = {
    "valueOf": function () { return Math.floor(Math.random()*1000); }
};
+rnd;               // -> 442;
+rnd;               // -> 727;
+rnd;               // -> 718;

" วิธีการขยายใน JavaScript " ผ่านคุณสมบัติต้นแบบ

Array.prototype.contains = function(value) {  
    for (var i = 0; i < this.length; i++) {  
        if (this[i] == value) return true;  
    }  
    return false;  
}

นี้จะเพิ่มcontainsวิธีการไปยังArrayวัตถุทั้งหมด คุณสามารถเรียกวิธีนี้โดยใช้ไวยากรณ์นี้

var stringArray = ["foo", "bar", "foobar"];
stringArray.contains("foobar");

หากต้องการลบคุณสมบัติอย่างถูกต้องจากวัตถุคุณควรลบคุณสมบัติแทนการตั้งค่าเป็นไม่ได้กำหนด :

var obj = { prop1: 42, prop2: 43 };

obj.prop2 = undefined;

for (var key in obj) {
    ...

คุณสมบัติprop2จะยังคงเป็นส่วนหนึ่งของการทำซ้ำ ถ้าคุณต้องการกำจัดprop2อย่างสมบูรณ์คุณควรทำ:

delete obj.prop2;

คุณสมบัติprop2จะไม่ปรากฏเมื่อคุณวนซ้ำผ่านคุณสมบัติ

with.

มันไม่ค่อยได้ใช้และตรงไปตรงมาไม่ค่อยมีประโยชน์ ... แต่ในสถานการณ์ที่ จำกัด มันมีประโยชน์

ตัวอย่างเช่น: ตัวอักษรของวัตถุค่อนข้างมีประโยชน์สำหรับการตั้งค่าคุณสมบัติบนวัตถุใหม่ได้อย่างรวดเร็ว แต่ถ้าคุณต้องการเปลี่ยนคุณสมบัติครึ่งหนึ่งบนวัตถุที่มีอยู่

var user = 
{
   fname: 'Rocket', 
   mname: 'Aloysus',
   lname: 'Squirrel', 
   city: 'Fresno', 
   state: 'California'
};

// ...

with (user)
{
   mname = 'J';
   city = 'Frostbite Falls';
   state = 'Minnesota';
}

ชี้อลันพายุเห็นว่าเรื่องนี้อาจเป็นอันตรายได้ค่อนข้าง: ถ้าวัตถุที่ใช้เป็นบริบทที่ไม่ได้มีหนึ่งในคุณสมบัติที่ถูกมอบหมายให้ไปก็จะได้รับการแก้ไขในขอบเขตด้านนอกอาจจะสร้างหรือเขียนทับตัวแปรทั่วโลก สิ่งนี้เป็นอันตรายอย่างยิ่งหากคุณคุ้นเคยกับการเขียนโค้ดเพื่อทำงานกับออบเจกต์ซึ่งคุณสมบัติที่มีค่าดีฟอลต์หรือค่าว่างจะไม่ถูกกำหนด:

var user = 
{
   fname: "John",
// mname definition skipped - no middle name
   lname: "Doe"
};

with (user)
{
   mname = "Q"; // creates / modifies global variable "mname"
}

ดังนั้นจึงเป็นความคิดที่ดีที่จะหลีกเลี่ยงการใช้withคำสั่งสำหรับการมอบหมายดังกล่าว

ดูเพิ่มเติมที่: มีการใช้งานที่ถูกต้องสำหรับคำสั่ง "กับ" ของ JavaScript หรือไม่?

วิธีการ (หรือฟังก์ชั่น) สามารถเรียกบนวัตถุที่ไม่ได้เป็นประเภทที่พวกเขาได้รับการออกแบบมาเพื่อทำงานกับ นี่เป็นวิธีที่ยอดเยี่ยมในการเรียกใช้เนทีฟ (เร็ว) บนวัตถุที่กำหนดเอง

var listNodes = document.getElementsByTagName('a');
listNodes.sort(function(a, b){ ... });

รหัสนี้ขัดข้องเพราะlistNodesไม่ใช่Array

Array.prototype.sort.apply(listNodes, [function(a, b){ ... }]);

รหัสงานนี้เพราะlistNodesกำหนดพออาร์เรย์เช่นคุณสมบัติ (ความยาว, [] ผู้ดำเนินการ) sort()ที่จะใช้โดย

Prototypal ที่สืบทอด (นิยมโดย Douglas Crockford) ปฏิวัติวิธีที่คุณคิดเกี่ยวกับสิ่งต่างๆมากมายใน Javascript อย่างสมบูรณ์

Object.beget = (function(Function){
    return function(Object){
        Function.prototype = Object;
        return new Function;
    }
})(function(){});

มันเป็นนักฆ่า! น่าเสียดายที่แทบไม่มีใครใช้มัน

จะช่วยให้คุณ "รับ" อินสแตนซ์ใหม่ของวัตถุใด ๆ ขยายพวกเขาในขณะที่ยังคงเชื่อมโยงมรดกสืบทอด (สด) ต้นแบบไปยังคุณสมบัติอื่น ๆ ของพวกเขา ตัวอย่าง:

var A = {
  foo : 'greetings'
};  
var B = Object.beget(A);

alert(B.foo);     // 'greetings'

// changes and additionns to A are reflected in B
A.foo = 'hello';
alert(B.foo);     // 'hello'

A.bar = 'world';
alert(B.bar);     // 'world'


// ...but not the other way around
B.foo = 'wazzap';
alert(A.foo);     // 'hello'

B.bar = 'universe';
alert(A.bar);     // 'world'

บางคนอาจเรียกสิ่งนี้ว่าเรื่องรสชาติ แต่:

aWizz = wizz || "default";
// same as: if (wizz) { aWizz = wizz; } else { aWizz = "default"; }

ผู้ประกอบการ trinary สามารถถูกผูกมัดให้ทำหน้าที่เหมือน Scheme's (cond ... ):

(cond (predicate  (action  ...))
      (predicate2 (action2 ...))
      (#t         default ))

สามารถเขียนเป็น ...

predicate  ? action( ... ) :
predicate2 ? action2( ... ) :
             default;

นี่คือ "การทำงาน" มากเนื่องจากมันจะแยกรหัสของคุณโดยไม่มีผลข้างเคียง ดังนั้นแทนที่จะ:

if (predicate) {
  foo = "one";
} else if (predicate2) {
  foo = "two";
} else {
  foo = "default";
}

คุณสามารถเขียน:

foo = predicate  ? "one" :
      predicate2 ? "two" :
                   "default";

ใช้งานได้ดีกับการเรียกซ้ำอีกด้วย :)

ตัวเลขก็เป็นวัตถุ ดังนั้นคุณสามารถทำสิ่งดีๆเช่น:

// convert to base 2
(5).toString(2) // returns "101"

// provide built in iteration
Number.prototype.times = function(funct){
  if(typeof funct === 'function') {
    for(var i = 0;i < Math.floor(this);i++) {
      funct(i);
    }
  }
  return this;
}


(5).times(function(i){
  string += i+" ";
});
// string now equals "0 1 2 3 4 "

var x = 1000;

x.times(function(i){
  document.body.innerHTML += '<p>paragraph #'+i+'</p>';
});
// adds 1000 parapraphs to the document

วิธีการเกี่ยวกับการปิดใน JavaScript (คล้ายกับวิธีที่ไม่ระบุชื่อใน C # v2.0 +) คุณสามารถสร้างฟังก์ชั่นที่สร้างฟังก์ชั่นหรือ "แสดงออก"

ตัวอย่างของการปิด :

//Takes a function that filters numbers and calls the function on 
//it to build up a list of numbers that satisfy the function.
function filter(filterFunction, numbers)
{
  var filteredNumbers = [];

  for (var index = 0; index < numbers.length; index++)
  {
    if (filterFunction(numbers[index]) == true)
    {
      filteredNumbers.push(numbers[index]);
    }
  }
  return filteredNumbers;
}

//Creates a function (closure) that will remember the value "lowerBound" 
//that gets passed in and keep a copy of it.
function buildGreaterThanFunction(lowerBound)
{
  return function (numberToCheck) {
    return (numberToCheck > lowerBound) ? true : false;
  };
}

var numbers = [1, 15, 20, 4, 11, 9, 77, 102, 6];

var greaterThan7 = buildGreaterThanFunction(7);
var greaterThan15 = buildGreaterThanFunction(15);

numbers = filter(greaterThan7, numbers);
alert('Greater Than 7: ' + numbers);

numbers = filter(greaterThan15, numbers);
alert('Greater Than 15: ' + numbers);

นอกจากนี้คุณยังสามารถขยาย (สืบทอด) คลาสและแทนที่คุณสมบัติ / เมธอดโดยใช้ต้นแบบ chain spoon16 ที่กล่าวถึง

ในตัวอย่างต่อไปนี้เราสร้างคลาส Pet และกำหนดคุณสมบัติบางอย่าง นอกจากนี้เรายังแทนที่. toString () วิธีการสืบทอดจาก Object

หลังจากนี้เราสร้างคลาส Dog ซึ่งขยาย Pet และแทนที่เมธอด. toString ()อีกครั้งเพื่อเปลี่ยนพฤติกรรม (polymorphism) นอกจากนี้เรายังเพิ่มคุณสมบัติอื่น ๆ ลงในคลาสย่อย

หลังจากนี้เราตรวจสอบห่วงโซ่การสืบทอดเพื่ออวดว่าสุนัขยังคงเป็นสุนัขประเภท, ประเภทสัตว์เลี้ยงและประเภทวัตถุ

// Defines a Pet class constructor 
function Pet(name) 
{
    this.getName = function() { return name; };
    this.setName = function(newName) { name = newName; };
}

// Adds the Pet.toString() function for all Pet objects
Pet.prototype.toString = function() 
{
    return 'This pets name is: ' + this.getName();
};
// end of class Pet

// Define Dog class constructor (Dog : Pet) 
function Dog(name, breed) 
{
    // think Dog : base(name) 
    Pet.call(this, name);
    this.getBreed = function() { return breed; };
}

// this makes Dog.prototype inherit from Pet.prototype
Dog.prototype = new Pet();

// Currently Pet.prototype.constructor
// points to Pet. We want our Dog instances'
// constructor to point to Dog.
Dog.prototype.constructor = Dog;

// Now we override Pet.prototype.toString
Dog.prototype.toString = function() 
{
    return 'This dogs name is: ' + this.getName() + 
        ', and its breed is: ' + this.getBreed();
};
// end of class Dog

var parrotty = new Pet('Parrotty the Parrot');
var dog = new Dog('Buddy', 'Great Dane');
// test the new toString()
alert(parrotty);
alert(dog);

// Testing instanceof (similar to the `is` operator)
alert('Is dog instance of Dog? ' + (dog instanceof Dog)); //true
alert('Is dog instance of Pet? ' + (dog instanceof Pet)); //true
alert('Is dog instance of Object? ' + (dog instanceof Object)); //true

คำตอบทั้งสองสำหรับคำถามนี้คือรหัสที่ดัดแปลงจากบทความ MSDN ที่ยอดเยี่ยมโดย Ray Djajadinata

คุณอาจจับข้อยกเว้นขึ้นอยู่กับประเภทของพวกเขา ยกมาจากMDC :

try {
   myroutine(); // may throw three exceptions
} catch (e if e instanceof TypeError) {
   // statements to handle TypeError exceptions
} catch (e if e instanceof RangeError) {
   // statements to handle RangeError exceptions
} catch (e if e instanceof EvalError) {
   // statements to handle EvalError exceptions
} catch (e) {
   // statements to handle any unspecified exceptions
   logMyErrors(e); // pass exception object to error handler
}

หมายเหตุ: ส่วนคำสั่ง catch แบบมีเงื่อนไขเป็นส่วนขยายของ Netscape (และ Mozilla / Firefox) ที่ไม่ได้เป็นส่วนหนึ่งของข้อมูลจำเพาะ ECMAScript และไม่สามารถเชื่อถือได้ยกเว้นบนเบราว์เซอร์บางตัว

ปิดส่วนหัวของฉัน ...

ฟังก์ชั่น

arguments.callee หมายถึงฟังก์ชั่นที่เป็นโฮสต์ของตัวแปร "arguments" ดังนั้นมันสามารถใช้เพื่อเรียกคืนฟังก์ชั่นที่ไม่ระบุชื่อ:

var recurse = function() {
  if (condition) arguments.callee(); //calls recurse() again
}

มีประโยชน์ถ้าคุณต้องการทำสิ่งนี้:

//do something to all array items within an array recursively
myArray.forEach(function(item) {
  if (item instanceof Array) item.forEach(arguments.callee)
  else {/*...*/}
})

วัตถุ

สิ่งที่น่าสนใจเกี่ยวกับสมาชิกวัตถุ: พวกเขาสามารถมีสตริงเป็นชื่อของพวกเขา:

//these are normal object members
var obj = {
  a : function() {},
  b : function() {}
}
//but we can do this too
var rules = {
  ".layout .widget" : function(element) {},
  "a[href]" : function(element) {}
}
/* 
this snippet searches the page for elements that
match the CSS selectors and applies the respective function to them:
*/
for (var item in rules) {
  var elements = document.querySelectorAll(rules[item]);
  for (var e, i = 0; e = elements[i++];) rules[item](e);
}

เงื่อนไข

String.splitสามารถใช้นิพจน์ทั่วไปเป็นพารามิเตอร์ได้:

"hello world   with  spaces".split(/\s+/g);
//returns an array: ["hello", "world", "with", "spaces"]

String.replaceสามารถใช้นิพจน์ปกติเป็นพารามิเตอร์การค้นหาและฟังก์ชั่นเป็นพารามิเตอร์ทดแทน:

var i = 1;
"foo bar baz ".replace(/\s+/g, function() {return i++});
//returns "foo1bar2baz3"

คุณสามารถใช้วัตถุแทนสวิตช์ได้เกือบตลอดเวลา

function getInnerText(o){
    return o === null? null : {
        string: o,
        array: o.map(getInnerText).join(""),
        object:getInnerText(o["childNodes"])
    }[typeis(o)];
}

อัปเดต: หากคุณกังวลเกี่ยวกับกรณีที่ประเมินล่วงหน้าว่าไม่มีประสิทธิภาพ (เพราะเหตุใดคุณจึงกังวลเกี่ยวกับประสิทธิภาพในช่วงแรกของการออกแบบโปรแกรม) คุณสามารถทำสิ่งนี้ได้:

function getInnerText(o){
    return o === null? null : {
        string: function() { return o;},
        array: function() { return o.map(getInnerText).join(""); },
        object: function () { return getInnerText(o["childNodes"]; ) }
    }[typeis(o)]();
}

นี่เป็นงานพิมพ์ (หรืออ่าน) ที่ยากกว่าสวิตช์หรือวัตถุ แต่จะรักษาประโยชน์ของการใช้วัตถุแทนสวิตช์โดยมีรายละเอียดในส่วนความเห็นด้านล่าง สไตล์นี้ยังทำให้ตรงไปตรงมามากขึ้นในการหมุนออกเป็น "คลาส" ที่เหมาะสมเมื่อมันโตพอ

update2: ด้วยส่วนขยายไวยากรณ์ที่เสนอสำหรับ ES.next สิ่งนี้จะกลายเป็น

let getInnerText = o -> ({
    string: o -> o,
    array: o -> o.map(getInnerText).join(""),
    object: o -> getInnerText(o["childNodes"])
}[ typeis o ] || (->null) )(o);

ตรวจสอบให้แน่ใจว่าใช้เมธอดhasOwnPropertyเมื่อวนซ้ำผ่านคุณสมบัติของวัตถุ:

for (p in anObject) {
    if (anObject.hasOwnProperty(p)) {
        //Do stuff with p here
    }
}

สิ่งนี้ถูกทำเพื่อให้คุณเข้าถึงคุณสมบัติโดยตรงของanObjectเท่านั้นและไม่ใช้คุณสมบัติที่อยู่ในสายโซ่ต้นแบบ

ตัวแปรส่วนตัวพร้อม Public Interface

มันใช้เคล็ดลับเล็กน้อยอย่างประณีตพร้อมนิยามฟังก์ชั่นการโทรด้วยตนเอง ทุกอย่างภายในวัตถุที่ส่งคืนจะพร้อมใช้งานในส่วนต่อประสานสาธารณะในขณะที่ทุกอย่างเป็นส่วนตัว

var test = function () {
    //private members
    var x = 1;
    var y = function () {
        return x * 2;
    };
    //public interface
    return {
        setx : function (newx) {
            x = newx;
        },
        gety : function () {
            return y();
        }
    }
}();

assert(undefined == test.x);
assert(undefined == test.y);
assert(2 == test.gety());
test.setx(5);
assert(10 == test.gety());