Скрытые возможности JavaScript?

Функции в 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

Для написания элегантного javascript можно использовать методы функционального программирования..

В частности, функции могут передаваться как параметры, например Array.filter () принимает обратный вызов:

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

Вы также можете объявить «частную» функцию, которая существует только в рамках определенной функции:

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

Частные методы

У объекта могут быть частные методы.

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());

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 для такого назначения.

См. Также: Есть ли законное использование оператора «with» в JavaScript?

Вы можете получить доступ к свойствам объекта с помощью [] вместо .

Это позволяет вам искать свойство, соответствующее переменной.

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.

«Методы расширения в 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 a = b || c;

Переменная a получит значение c, только если b будет фальшивка (если это null, false, undefined, 0, empty string или NaN), в противном случае a получит значение b.

Это часто бывает полезно в функциях, когда вы хотите присвоить аргументу значение по умолчанию, если оно не указано:

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

Пример отката IE в обработчиках событий:

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

Следующие языковые функции были с нами в течение долгого времени, все реализации JavaScript поддерживают их, но они не были частью спецификации до ECMAScript 5-е издание:

Заявление debugger

Описано на: § 12.15 Оператор отладчика

Этот оператор позволяет вам вставить точки останова программно в ваш код, просто:

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

Если отладчик присутствует или активен, он немедленно остановится прямо в этой строке.

В противном случае, если отладчик отсутствует или активен, этот оператор не имеет наблюдаемого эффекта.

Многострочные строковые литералы

Описано на: § 7.8.4 Строковые литералы

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

Вы должны быть осторожны, потому что символ рядом с \должен является ограничителем строки, например, если у вас есть пробел после \, код будет Смотреть точно так же, но вызовет SyntaxError.

Удивительно, как много людей не понимают, что это тоже объектно-ориентированный подход.

JavaScript не имеет области действия блока (но у него есть закрытие, так что назовем его даже?).

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

Как насчет закрытие в 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);

Вы также можете расширять (наследовать) классы и переопределять свойства / методы, используя упомянутую цепочку прототипов ложка16.

В следующем примере мы создаем класс Pet и определяем некоторые свойства. Мы также переопределяем метод .toString (), унаследованный от Object.

После этого мы создаем класс Dog, метод расширяет Pet и переопределяет .toString () которого снова меняет его поведение (полиморфизм). Кроме того, мы добавляем в дочерний класс некоторые другие свойства.

После этого мы проверяем цепочку наследования, чтобы показать, что Dog все еще имеет тип Dog, тип Pet и тип Object.

// 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.

Функции являются объектами и поэтому могут иметь свойства.

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

fn.foo = 1;

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

Я мог бы процитировать большую часть прекрасной книги Дугласа Крокфорда. JavaScript: хорошие стороны.

Но я возьму для вас только один, всегда используйте === и !== вместо == и !=.

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

== не является транзитивным. Если вы используете ===, он даст false для все эти заявления, как и ожидалось.

В Javascript есть статические переменные внутри функций:

function someFunction(){
  var Static = arguments.callee;
  Static.someStaticVariable = (Static.someStaticVariable || 0) + 1;
  alert(Static.someStaticVariable);
}
someFunction() //Alerts 1
someFunction() //Alerts 2
someFunction() //Alerts 3

Он также имеет статические переменные внутри объектов:

function Obj(){
  this.Static = arguments.callee;
}
a = new Obj();
a.Static.name = "a";
b = new Obj();
alert(b.Static.name); //Alerts b

undefined не определен. Итак, вы можете сделать это:

if (obj.field === undefined) /* ... */

Как уже указывал Мариус, в функциях могут быть общедоступные статические переменные.

Я обычно использую их для создания функций, которые выполняются только один раз, или для кеширования некоторых сложных результатов вычислений.

Вот пример моего старого «одноэлементного» подхода:

var singleton = function(){ 

  if (typeof arguments.callee.__instance__ == 'undefined') { 

    arguments.callee.__instance__ = new function(){

      //this creates a random private variable.
      //this could be a complicated calculation or DOM traversing that takes long
      //or anything that needs to be "cached"
      var rnd = Math.random();

      //just a "public" function showing the private variable value
      this.smth = function(){ alert('it is an object with a rand num=' + rnd); };

   };

  }

  return arguments.callee.__instance__;

};


var a = new singleton;
var b = new singleton;

a.smth(); 
b.smth();

Как видите, в обоих случаях конструктор запускается только один раз.

Например, я использовал этот подход еще в 2004 году, когда мне пришлось создать модальное диалоговое окно с серым фоном, которое покрыл всю страницу (что-то вроде Лайтбокс). Интернет Explorer 5.5 и 6 имеют самый высокий контекст стекирования для элементы <select> или <iframe> из-за их «оконная» природа; поэтому, если страница содержала элементы выбора, единственный способ скрыть их - создать iframe и расположите его «вверху» страницы. Итак, весь сценарий был довольно сложный и немного медленный (использовался фильтр: выражений для установки непрозрачности закрывающего окна iframe). В В скрипте "shim" был только один метод ".show ()", который создавал прокладку только один раз и кешировали в статической переменной :)

Меня просто восхищает то, как JavaScript работает с Date ()!

function isLeapYear(year) {
    return (new Date(year, 1, 29, 0, 0).getMonth() != 2);
}

Это действительно «скрытая особенность».

Обновлено: удалено "?" условие, предложенное в комментариях для политкорректности. Было: ... новая дата (год, 1, 29, 0, 0) .getMonth ()! = 2? правда: ложь ... Подробности смотрите в комментариях.

Все функции на самом деле являются экземплярами встроенного типа Функция, который имеет конструктор, который принимает строку, содержащую определение функции, поэтому вы можете фактически определять функции во время выполнения, например, объединяя строки:

//e.g., createAddFunction("a","b") returns function(a,b) { return a+b; }
function createAddFunction(paramName1, paramName2)
 { return new Function( paramName1, paramName2
                       ,"return "+ paramName1 +" + "+ paramName2 +";");
 }

Кроме того, для пользовательских функций Function.toString () возвращает определение функции в виде буквальной строки.

Вам не нужно определять какие-либо параметры для функции. Вы можете просто использовать объект функции 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

Все объекты в Javascript реализованы как хэш-таблицы, поэтому к их свойствам можно получить доступ через индексатор и наоборот. Также вы можете перечислить все свойства с помощью оператора для / в:

var x = {a: 0};
x["a"]; //returns 0

x["b"] = 1;
x.b; //returns 1

for (p in x) document.write(p+";"); //writes "a;b;"

Вы можете использовать оператор в, чтобы проверить, существует ли ключ в объекте:

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

JavaScript использует простой литерал объекта:

var x = { intValue: 5, strValue: "foo" };

Таким образом создается полноценный объект.

JavaScript использует объектную ориентацию на основе прототипов и предоставляет возможность расширять типы во время выполнения:

String.prototype.doubleLength = function() {
    return this.length * 2;
}

alert("foo".doubleLength());

Объект делегирует весь доступ к атрибутам, которые сам не содержит, своему «прототипу», другому объекту. Это можно использовать для реализации наследования, но на самом деле он более мощный (даже если более громоздкий):

/* "Constructor" */
function foo() {
    this.intValue = 5;
}

/* Create the prototype that includes everything
 * common to all objects created be the foo function.
 */
foo.prototype = {
    method: function() {
        alert(this.intValue);
    }
}

var f = new foo();
f.method();

Может быть, для некоторых это немного очевидно ...

Установите Firebug и используйте console.info («привет»). Намного лучше, чем использовать random alert ();, который, как я помню, делал много лет назад.

Один из моих любимых - проверка типа конструктора:

function getObjectType( obj ) {  
    return obj.constructor.name;  
}  

window.onload = function() {  
    alert( getObjectType( "Hello World!" ) );  
    function Cat() {  
        // some code here...  
    }  
    alert( getObjectType( new Cat() ) );  
}

Так что вместо устаревшего старого [Object object], который вы часто получаете с ключевым словом typeof, вы можете получить реальные типы объектов, основанные на конструкторе.

Другой - использование переменных аргументов как способ «перегрузить» функции. Все, что вы делаете, это используете выражение для определения количества аргументов и возврата перегруженного вывода:

function myFunction( message, iteration ) {  
    if ( arguments.length == 2 ) {  
        for ( i = 0; i < iteration; i++ ) {  
            alert( message );  
        }  
    } else {  
        alert( message );  
    }  
}  

window.onload = function() {  
    myFunction( "Hello World!", 3 );  
}

Наконец, я бы сказал сокращенное обозначение оператора присваивания. Я узнал об этом из источника фреймворка jQuery ... по-старому:

var a, b, c, d;
b = a;
c = b;
d = c;

Новый (сокращенный) способ:

var a, b, c, d;
d = c = b = a;

Хорошо повеселиться :)

Этот очень скрыт и полезен только изредка ;-)

Вы можете использовать цепочку прототипов для создания объекта, который делегирует другому объекту, не изменяя исходный объект.

var o1 = { foo: 1, bar: 'abc' };
function f() {}
f.prototype = o1;
o2 = new f();
assert( o2.foo === 1 );
assert( o2.bar === 'abc' );
o2.foo = 2;
o2.baz = true;
assert( o2.foo === 2 );
// o1 is unchanged by assignment to o2
assert( o1.foo === 1 );
assert( o2.baz );

Это касается только «простых» значений на o1. Если вы изменяете массив или другой объект, прототип больше не «защищает» исходный объект. Будьте осторожны, когда у вас есть {} или [] в определении / прототипе класса.

Метки времени в JavaScript:

// Usual Way
var d = new Date();
timestamp = d.getTime();

// Shorter Way
timestamp = (new Date()).getTime();

// Shortest Way
timestamp = +new Date();

Function.toString () (неявно):

function x() {
    alert("Hello World");
}
eval ("x = " + (x + "").replace(
    'Hello World',
    'STACK OVERFLOW BWAHAHA"); x("'));
x();

Частные переменные с общедоступным интерфейсом

Он использует небольшую хитрость с определением функции автоматического вызова. Все внутри возвращаемого объекта доступно в общедоступном интерфейсе, а все остальное является частным.

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());

Методы (или функции) могут вызываться для объекта, который не относится к тому типу, для работы с которым они были разработаны. Это замечательно для вызова собственных (быстрых) методов для пользовательских объектов.

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

Этот код дает сбой, потому что listNodes не является Array

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

Этот код работает, потому что listNodes определяет достаточно свойств, подобных массиву (длина, оператор []), для использования sort().

Числа - тоже объекты. Итак, вы можете делать такие классные вещи, как:

// 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

Вы можете сделать почти все, что угодно, в круглых скобках, если разделите операторы запятыми:

var z = ( x = "can you do crazy things with parenthesis", ( y = x.split(" "), [ y[1], y[0] ].concat( y.slice(2) ) ).join(" ") )

alert(x + "\n" + y + "\n" + z)

Выход:

can you do crazy things with parenthesis
can,you,do,crazy,things,with,parenthesis
you can do crazy things with parenthesis

Понятие правдивых и ложных ценностей. Вам не нужно делать что-то вроде

если (someVar === undefined || someVar === null) ...

Просто сделайте:

если (! someVar).

Каждому значению соответствует логическое представление.

Вы можете выполнить метод объекта для любого объекта, независимо от того, есть ли у него этот метод или нет. Конечно, это может не всегда работать (если метод предполагает, что у объекта есть что-то, чего нет), но это может быть чрезвычайно полезно. Например:

function(){
    arguments.push('foo') // This errors, arguments is not a proper array and has no push method
    Array.prototype.push.apply(arguments, ['foo']) // Works!
}

Joose - хорошая объектная система, если вам нужен объектно-ориентированный объект на основе классов, который похож на CLOS.

// Create a class called Point
Class("Point", {
    has: {
        x: {
            is:   "rw",
            init: 0
        },
        y: {
            is:   "rw",
            init: 0
        }
    },
    methods: {
        clear: function () {
            this.setX(0);
            this.setY(0);
        }
    }
})

// Use the class
var point = new Point();
point.setX(10)
point.setY(20);
point.clear();

Все ваши «скрытые» функции находятся прямо здесь, в вики Mozilla: http://developer.mozilla.org/en/JavaScript.

Есть Справочник по основному JavaScript 1.5, что нового в JavaScript 1.6, что такое новое в JavaScript 1.7, а также что новое в JavaScript 1.8. Просмотрите все те примеры, которые действительно работают и ошибочны в нет.

Посещение:

• http://images.google.com/images?q=disco

Вставьте этот код JavaScript в адресную строку своего веб-браузера:

• http://amix.dk/upload/awt/spin.txt
• http://amix.dk/upload/awt/disco.txt

Наслаждайтесь дискотекой на JavaScript :-p

Кто-то назвал бы это делом вкуса, но:

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

Тройной оператор можно объединить в цепочку, чтобы он действовал как Scheme (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";

Также хорошо работает с рекурсией :)

С верхней части моей головы...

Функции

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"

Вы можете на лету переопределить большие части среды выполнения, например изменение конструктора Array или определение undefined. Не то чтобы вам следовало, но это может - мощная функция.

Несколько менее опасная форма этого - добавление вспомогательных методов к существующим объектам. Вы можете, например, сделать IE6 "родной" поддержкой indexOf на массивах.

Вот несколько интересных вещей:

• Сравнение NaN с чем-либо (даже с NaN) всегда неверно, включая ==, < и >.
• NaN означает не число, но если вы спросите тип, он фактически вернет число.
• Array.sort может выполнять функцию компаратора и вызывается драйвером, подобным быстрой сортировке (зависит от реализации).
• «Константы» регулярных выражений могут поддерживать состояние, как последнее, с чем они сопоставлялись.
• Некоторые версии JavaScript позволяют получить доступ к членам $0, $1, $2 с помощью регулярного выражения.
• null не похож ни на что другое. Это ни объект, ни логическое значение, ни число, ни строка, ни undefined. Это немного похоже на «альтернативу» undefined. (Примечание: typeof null == "object")
• Во внешнем контексте this выдает безымянный объект [Global].
• Объявление переменной с помощью var вместо того, чтобы просто полагаться на автоматическое объявление переменной, дает среде выполнения реальный шанс оптимизировать доступ к этой переменной.
• Конструкция with разрушит такие оптимизации
• Имена переменных могут содержать символы Юникода.
• Регулярные выражения JavaScript на самом деле не являются регулярными. Они основаны на регулярных выражениях Perl, и можно создавать выражения с опережением, вычисление которых занимает очень и очень много времени.
• Блоки могут быть помечены и использоваться в качестве целей break. Петли могут быть помечены и использоваться в качестве мишени для continue.
• Массивы не редкие. Установка 1000-го элемента в пустом массиве должна заполнить его undefined. (зависит от реализации)
• if (new Boolean(false)) {...} выполнит блок {...}
• Механизм регулярных выражений Javascript зависит от реализации: например, можно писать "непереносимые" регулярные выражения.

[немного обновлено в ответ на хорошие комментарии; пожалуйста, смотрите комментарии]

Также упоминается в "Javascript: The Good Parts" Крокфорда:

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.

В этой теме есть несколько ответов, показывающих, как расширить объект Array через его прототип. Это ПЛОХО IDEA, потому что она нарушает заявление for (i in a).

Ничего страшного, если вы не используете for (i in a) где-нибудь в вашем коде? Ну, только если ваш собственный код только код, который вы используете, что маловероятно внутри браузера. Боюсь, что если люди начнут расширяться их объекты Array, как это, начнется переполнение стека переполнен кучей загадочных ошибок JavaScript.

См. Полезные подробности здесь.

Вот пара ярлыков:

var a = []; // equivalent to new Array()
var o = {}; // equivalent to new Object()

Я бы сказал самоисполняющиеся функции.

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

Поскольку Javascript не имеет области действия блока, вы можете использовать самоисполняющуюся функцию, если хотите определить локальные переменные:

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

Здесь myvar не мешает и не загрязняет глобальную область видимости и исчезает при завершении функции.

Оператор == имеет очень особое свойство, которое создает это тревожное равенство (да, я знаю, что в других динамических языках, таких как Perl, такое поведение было бы ожидаемым, но JavaScript обычно не пытается быть умным в сравнении):

>>> 1 == true
true
>>> 0 == false
true
>>> 2 == true
false

Предотвращение раздражающих ошибок при тестировании в Internet Explorer при использовании console.info () для Firebug:

function log(message) {
    (console || { log: function(s) { alert(s); }).log(message);
}

let.

Аналогом отсутствие у var области видимости блока является let, введено в JavaScript 1.7.

• The let statement provides a way to associate values with variables within the scope of a block, without affecting the values of like-named variables outside the block.
• The let expression lets you establish variables scoped only to a single expression.
• The let definition defines variables whose scope is constrained to the block in which they're defined. This syntax is very much like the syntax used for var.
• You can also use let to establish variables that exist only within the context of a for loop.

  function varTest() {
        var x = 31;
    if (true) {
      var x = 71;  // same variable!
      alert(x);  // 71
    }
    alert(x);  // 71
  }

  function letTest() {
    let x = 31;
    if (true) {
      let x = 71;  // different variable
      alert(x);  // 71
    }
    alert(x);  // 31
  }

С 2008 года JavaScript 1.7 поддерживается в FireFox 2.0+ и Safari 3.x.

Генераторы и итераторы (работает только в Firefox 2+ и Safari).

function fib() {
  var i = 0, j = 1;
  while (true) {
    yield i;
    var t = i;
    i = j;
    j += t;
  }
}

var g = fib();
for (var i = 0; i < 10; i++) {
  document.write(g.next() + "<br>\n");
}

The function containing the yield keyword is a generator. When you call it, its formal parameters are bound to actual arguments, but its body isn't actually evaluated. Instead, a generator-iterator is returned. Each call to the generator-iterator's next() method performs another pass through the iterative algorithm. Each step's value is the value specified by the yield keyword. Think of yield as the generator-iterator version of return, indicating the boundary between each iteration of the algorithm. Each time you call next(), the generator code resumes from the statement following the yield.

In normal usage, iterator objects are "invisible"; you won't need to operate on them explicitly, but will instead use JavaScript's for...in and for each...in statements to loop naturally over the keys and/or values of objects.

var objectWithIterator = getObjectSomehow();

for (var i in objectWithIterator)
{
  document.write(objectWithIterator[i] + "<br>\n");
}

Чтобы правильно удалить свойство из объекта, вы должны удалить свойство вместо того, чтобы просто установить для него значение неопределенный:

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

obj.prop2 = undefined;

for (var key in obj) {
    ...

Свойство prop2 по-прежнему будет частью итерации. Если вы хотите полностью избавиться от prop2, вам следует вместо этого сделать:

delete obj.prop2;

Свойство prop2 больше не будет отображаться при итерации свойств.

Если вы ищете в Google достойную ссылку на JavaScript по данной теме, включите в свой запрос ключевое слово «mdc», и ваши первые результаты будут из Центра разработчиков Mozilla. Я не ношу с собой никаких офлайн-справочников или книг. Я всегда использую трюк с ключевыми словами "mdc", чтобы напрямую добраться до того, что я ищу. Например:

Google: Сортировка массива javascript mdc
(в большинстве случаев вы можете опустить "javascript")

Обновлять: Mozilla Developer Центр был переименован в Mozilla Developer Сеть. Уловка с ключевым словом "mdc" по-прежнему работает, но вскоре нам может потребоваться вместо этого начни использовать "mdn".

Если вы слепо eval() строку JSON для ее десериализации, вы можете столкнуться с проблемами:

1. Это небезопасно. Строка может содержать вызовы вредоносных функций!

2. Если вы не заключите строку JSON в круглые скобки, имена свойств могут быть ошибочно приняты за метки, что приведет к неожиданному поведению или синтаксической ошибке:

   eval("{ \"foo\": 42 }"); // syntax error: invalid label
   eval("({ \"foo\": 42 })"); // OK
   

function l(f,n){n&&l(f,n-1,f(n));}

l( function( loop ){ alert( loop ); }, 5 );

предупреждения 5, 4, 3, 2, 1

Чтобы преобразовать число с плавающей запятой в целое число, вы можете использовать один из следующих загадочных приемов (пожалуйста, не делайте этого):

1. 3.14 >> 0 (через 2.9999999999999999 >> .5?)
2. 3.14 | 0 (через Как лучше всего преобразовать числа с плавающей запятой в целое число в JavaScript?)
3. 3.14 & -1
4. 3.14 ^ 0
5. ~~3.14

По сути, применение любой бинарной операции к веществу с плавающей запятой, которая не изменяет конечное значение (т.е. функцию идентификации), приводит к преобразованию числа с плавающей запятой в целое число.

jQuery и JavaScript:

Имена переменных могут содержать несколько нечетных символов. Я использую символ $ для обозначения переменных, содержащих объекты jQuery:

var $links = $("a");

$links.hide();

Шаблон связывания объектов в jQuery довольно хорош, но применение этого шаблона может немного запутать. К счастью, JavaScript позволяет разбивать строки, например:

$("a")
.hide()
.fadeIn()
.fadeOut()
.hide();

Общий JavaScript:

Я считаю полезным эмулировать область видимости с помощью самоисполняющихся функций:

function test()
{
    // scope of test()

    (function()
    {
        // scope inside the scope of test()
    }());

    // scope of test()
}

Операторы функций и выражения функций обрабатываются по-разному.

function blarg(a) {return a;} // statement
bleep = function(b) {return b;} //expression

Все операторы функций анализируются перед запуском кода - функция в нижней части файла JavaScript будет доступна в первом операторе. С другой стороны, он не сможет использовать преимущества определенного динамического контекста, такого как окружающие операторы with - with не был выполнен при анализе функции.

Выражения функций выполняются встроенно, прямо там, где они встречаются. Они недоступны до этого времени, но могут воспользоваться динамическим контекстом.

Прототипное наследование (популяризированный Дугласом Крокфордом) полностью меняет ваше представление о множестве вещей в 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'

Значение window.name сохраняется при изменении страницы, может быть прочитано родительским окном, если оно находится в том же домене (если в iframe, используйте document.getElementById("your frame's ID").contentWindow.name для доступа к нему) и ограничено только доступной памятью.

Обязательно используйте метод hasOwnProperty при итерации по свойствам объекта:

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

Это сделано для того, чтобы вы имели доступ только к прямые свойства объект, а не использовали свойства, которые находятся в цепочке прототипов.

Если вы хотите удалить элемент из массива, можно использовать оператор Удалить как таковой:

var numbers = [1,2,3,4,5];
delete numbers[3];
//numbers is now [1,2,3,undefined,5]

Как видите, элемент был удален, но в массиве осталась дыра, так как элемент был заменен значением неопределенный.

Таким образом, чтобы обойти эту проблему, вместо использования Удалить используйте метод массива сращивание ... как таковой:

var numbers = [1,2,3,4,5];
numbers.splice(3,1);
//numbers is now [1,2,3,5]

Первый аргумент сращивание - порядковый номер в массиве [index], а второй - количество удаляемых элементов.

Микрософт подарок для JavaScript: AJAX

AJAXCall('http://www.abcd.com/')

function AJAXCall(url) {
 var client = new XMLHttpRequest();
 client.onreadystatechange = handlerFunc;
 client.open("GET", url);
 client.send();
}

function handlerFunc() {
 if (this.readyState == 4 && this.status == 200) {
 if (this.responseXML != null)
   document.write(this.responseXML)
 }
}

Большие циклы быстрее выполняются в состоянии while и в обратном направлении - то есть, если порядок цикла для вас не имеет значения. Примерно в 50% моего кода это обычно не так.

т.е.

var i, len = 100000;

for (var i = 0; i < len; i++) {
  // do stuff
}

Медленнее, чем:

i = len;
while (i--) {
  // do stuff
}

Также существует почти неизвестный синтаксис JavaScript:

var a;
a=alert(5),7;
alert(a);    // alerts undefined
a=7,alert(5);
alert(a);    // alerts 7

a=(3,6);
alert(a);    // alerts 6

Подробнее об этом здесь.

В большинстве случаев вы можете использовать объекты вместо переключателей.

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);

Вы можете поймать исключения в зависимости от их типа. Цитируется из 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 и, следовательно, на него нельзя полагаться, за исключением определенных браузеров.

Вы можете превратить любой * объект с целочисленными свойствами и свойство длины в собственно массив и, таким образом, снабдить его всеми методами массива, такими как push, pop, splice, map, filter, reduce и т. д.

Array.prototype.slice.call({"0":"foo", "1":"bar", 2:"baz", "length":3 }) 

// возвращает ["foo", "bar", "baz"]

Это работает с объектами jQuery, коллекциями html и объектами Array из других фреймов (как одно из возможных решений для всего типа массива). Я говорю, что если у него есть свойство length, вы можете превратить его в массив, и это не имеет значения. Существует множество объектов, не являющихся массивами, со свойством length, помимо объекта arguments.

Синтаксический сахар: встроенные замыкания цикла for

var i;

for (i = 0; i < 10; i++) (function ()
{
    // do something with i
}());

Нарушает почти все кодовые соглашения Дугласа Крокфорда, но я думаю, что на это довольно приятно смотреть, тем не менее :)

Альтернатива:

var i;

for (i = 0; i < 10; i++) (function (j)
{
    // do something with j
}(i));

Кажется, это работает только в Firefox (SpiderMonkey). Внутри функции:

• arguments[-2] дает количество аргументов (то же, что и arguments.length)
• arguments[-3] дает функцию, которая была вызвана (так же, как arguments.callee)

Проверка наличия. Так часто я вижу такие вещи

var a = [0, 1, 2];

// code that might clear the array.

if (a.length > 0) {
 // do something
}

вместо этого, например, просто сделайте это:

var a = [0, 1, 2];

// code that might clear the array.

if (a.length) { // if length is not equal to 0, this will be true
 // do something
}

Вы можете выполнить всевозможные проверки существования, но это был всего лишь простой пример, чтобы проиллюстрировать точку зрения.

Вот пример того, как использовать значение по умолчанию.

function (someArgument) {
      someArgument || (someArgument = "This is the deault value");
}

Это мои два цента. Есть и другие самородки, но пока это все.

Вам никогда не придется использовать eval() для сборки имен глобальных переменных.

То есть, если у вас есть несколько глобальных объектов (по какой-либо причине) с именем spec_grapes, spec_apples, вам не нужно обращаться к ним с помощью eval("spec_" + var).

Все глобальные объекты являются членами window[], поэтому вы можете использовать window["spec_" + var].

Вы можете перебирать массивы, используя "for in"

Марк Сидад указал на полезность цикла for in:

// creating an object (the short way, to use it like a hashmap)
var diner = {
"fruit":"apple"
"veggetable" = "bean"
}

// looping over its properties
for (meal_name in diner ) {
    document.write(meal_name+"<br \n>");
}

Результат :

fruit
veggetable

Но это еще не все. Поскольку вы можете использовать такой объект, как ассоциативный массив, вы можете обрабатывать ключи и значения, точно так же, как цикл foreach:

// looping over its properties and values
for (meal_name in diner ) {
    document.write(meal_name+" : "+diner[meal_name]+"<br \n>");
}

Результат :

fruit : apple
veggetable : bean

А поскольку массивы тоже являются объектами, вы можете точно так же перебирать другой массив:

var my_array = ['a', 'b', 'c'];
for (index in my_array ) {
    document.write(index+" : "+my_array[index]+"<br \n>");
}

Результат :

0 : a
1 : b
3 : c

Вы можете легко удалить известный элемент из массива

var arr = ['a', 'b', 'c', 'd'];
var pos = arr.indexOf('c');
pos > -1 && arr.splice( pos, 1 );

Вы можете легко перемешать массив

arr.sort(function() Math.random() - 0.5); - не совсем случайное распределение, см. Комментарии.

Скобки необязательны при создании новых «объектов».

function Animal () {

}

var animal = new Animal();
var animal = new Animal;

То же самое.

Вы можете назначить локальные переменные, используя [] с левой стороны. Пригодится, если вы хотите вернуть более одного значения из функции без создания ненужного массива.

function fn(){
    var cat = "meow";
    var dog = "woof";
    return [cat,dog];
};

var [cat,dog] = fn();  // Handy!

alert(cat);
alert(dog);

Это часть ядра JS, но я почему-то не осознавал этого до этого года.

Советы по JavaScript или проект jslibs.

Может быть, один из менее известных:

arguments.callee.caller + Функция # toString ()

function called(){
    alert("Go called by:\n"+arguments.callee.caller.toString());
}

function iDoTheCall(){
    called();
}

iDoTheCall();

Распечатывает исходный код iDoTheCall - Устарело, но иногда может быть полезно, когда единственным вариантом является оповещение ...

Вы можете привязать объект JavaScript как атрибут элемента HTML.

<div id = "jsTest">Klick Me</div>
<script type = "text/javascript">
    var someVariable = 'I was klicked';
    var divElement = document.getElementById('jsTest');
    // binding function/object or anything as attribute
    divElement.controller = function() { someVariable += '*'; alert('You can change instance data:\n' + someVariable ); };
    var onclickFunct = new Function( 'this.controller();' ); // Works in Firefox and Internet Explorer.
    divElement.onclick = onclickFunct;
</script>

Если вы пытаетесь изолировать код javascript и отключить все возможные способы оценки строк в код javascript, имейте в виду, что блокировка всех очевидных eval / document.write / new Function / setTimeout / setInterval / innerHTML и других манипуляций с DOM недопустима. довольно.

Для любого объекта o o.constructor.constructor("alert('hi')")() вызовет диалоговое окно с предупреждением со словом «привет» в нем.

Вы можете переписать это как

var Z = "constructor";
Z[Z][Z]("alert('hi')")();

Веселая штука.

Самые быстрые циклы в JavaScript - это while (i--). Во всех браузерах. Поэтому, если порядок обработки элементов вашего цикла не так важен, вы должны использовать форму while (i--):

var names = new Array(1024), i = names.length;
while(i--)
  names[i] = "John" + i;

Кроме того, если вам нужно использовать цикл for () в дальнейшем, не забудьте всегда кешировать свойство .length:

var birds = new Array(1024); 
for(var i = 0, j = birds.length; i < j; i++)
  birds[i].fly();

Для объединения больших строк используйте массивы (это быстрее):

var largeString = new Array(1024), i = largeString.length;
while(i--) {
  // It's faster than for() loop with largeString.push(), obviously :)
  largeString[i] = i.toString(16);
}

largeString = largeString.join("");

Это намного быстрее, чем largeString += "something" внутри цикла.

Оператор объединения очень крутой и создает чистый и лаконичный код, особенно когда вы объединяете его в цепочку: a || b || c || "default"; Проблема в том, что, поскольку он работает, вычисляя значение bool, а не null, если значения, которые оцениваются как false, допустимы, они будут часто перебираться смотрел. Не волнуйтесь, в этих случаях просто вернитесь к старому доброму тернарному оператору.

Я часто вижу код, который отказался и использовал глобальные вместо статических переменных, поэтому вот как (в примере того, что, я полагаю, вы могли бы назвать универсальной одноэлементной фабрикой):

var getInstance = function(objectName) {
  if ( !getInstance.instances ) {
    getInstance.instances = {};
  }

  if ( !getInstance.instances[objectName] ) {
    getInstance.instances[objectName] = new window[objectName];
  }

  return getInstance.instances[objectName];
};

Также обратите внимание на new window[objectName];, который был ключом к созданию экземпляров объектов по имени. Я понял это 2 месяца назад.

В том же духе, работая с DOM, я часто закапываю функциональные параметры и / или флаги в узлы DOM, когда я впервые инициализирую любую добавляемую функциональность. Я добавлю пример, если кто-то кричит.

Удивительно, но никто на первой странице не упомянул hasOwnProperty, что очень досадно. При использовании in для итерации рекомендуется использовать в защитном программировании метод hasOwnProperty для итерируемого контейнера, чтобы убедиться, что используемые имена членов соответствуют ожидаемым.

var x = [1,2,3];
for ( i in x ) {
    if ( !x.hasOwnProperty(i) )  { continue; }
    console.info(i, x[i]);
}

Прочтите здесь, чтобы узнать больше об этом.

Наконец, with - это почти всегда плохая идея.

Вы можете сделать «классы», у которых есть частные (недоступные вне определения «класса») статические и нестатические члены, в дополнение к публичным членам, используя замыкания.

Обратите внимание, что в приведенном ниже коде есть два типа открытых членов. Зависящие от экземпляра (определенные в конструкторе), которые имеют доступ к частным членам пример, и общие члены (определенные в объекте prototype), которые имеют доступ только к частным членам статический.

var MyClass = (function () {
    // private static
    var nextId = 1;

    // constructor
    var cls = function () {
        // private
        var id = nextId++;
        var name = 'Unknown';

        // public (this instance only)
        this.get_id = function () { return id; };

        this.get_name = function () { return name; };
        this.set_name = function (value) {
            if (typeof value != 'string')
                throw 'Name must be a string';
            if (value.length < 2 || value.length > 20)
                throw 'Name must be 2-20 characters long.';
            name = value;
        };
    };

    // public static
    cls.get_nextId = function () {
        return nextId;
    };

    // public (shared across instances)
    cls.prototype = {
        announce: function () {
            alert('Hi there! My id is ' + this.get_id() + ' and my name is "' + this.get_name() + '"!\r\n' +
                  'The next fellow\'s id will be ' + MyClass.get_nextId() + '!');
        }
    };

    return cls;
})();

Чтобы проверить этот код:

var mc1 = new MyClass();
mc1.set_name('Bob');

var mc2 = new MyClass();
mc2.set_name('Anne');

mc1.announce();
mc2.announce();

Если у вас есть Firebug, вы обнаружите, что нет другого способа получить доступ к закрытым членам, кроме как установить точку останова внутри замыкания, которое их определяет.

Этот шаблон очень полезен при определении классов, которым требуется строгая проверка значений и полный контроль изменений состояния.

Чтобы расширить этот класс, вы должны поместить MyClass.call(this); в начало конструктора в расширяющемся классе. Вам также потребуется копировать для объекта MyClass.prototype (не используйте его повторно, так как вы также измените элементы MyClass.

Если бы вы заменили метод announce, вы бы вызвали из него MyClass.announce следующим образом: MyClass.prototype.announce.call(this);

Оператор JavaScript typeof, используемый с массивами или нулями, всегда возвращает значение object, которое в некоторых случаях может не соответствовать ожиданиям программиста.

Вот функция, которая также вернет правильные значения для этих элементов. Распознавание массивов было скопировано из книги Дугласа Крокфорда «JavaScript: хорошие части».

function typeOf (value) {
    var type = typeof value;
    if (type === 'object') {
        if (value === null) {
             type = 'null';
        } else if (typeof value.length === 'number' && 
            typeof value.splice === 'function' && 
            !value.propertyIsEnumerable('length')) {
            type = 'array';
        }
    }
    return type;
}

Использование Function.apply для указания объекта, над которым будет работать функция:

Предположим, у вас есть класс

function myClass(){
 this.fun = function(){
   do something;
 };
}

если позже вы сделаете:

var a = new myClass();
var b = new myClass();

myClass.fun.apply(b); //this will be like b.fun();

Вы даже можете указать массив параметров вызова в качестве второго аргумента

посмотрите это: https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Function/apply

Мое первое представление - это не столько скрытая функция, сколько редко используемое приложение функции переопределения свойств. Поскольку вы можете переопределить методы объекта, вы можете кэшировать результат вызова метода, что полезно, если вычисление является дорогостоящим и вам нужна ленивая оценка. Это дает простейшую форму мемоизация.

function Circle(r) {
    this.setR(r);
}

Circle.prototype = {
  recalcArea: function() {
        this.area=function() {
            area = this.r * this.r * Math.PI;
            this.area = function() {return area;}
            return area;
        }
    },
  setR: function (r) {
      this.r = r;
      this.invalidateR();
    },
  invalidateR: function() {
        this.recalcArea();
    }
}

Выполните рефакторинг кода, который кэширует результат в метод, и вы получите:

Object.prototype.cacheResult = function(name, _get) {
  this[name] = function() {
    var result = _get.apply(this, arguments);
    this[name] = function() {
      return result;
    }
    return result;
  };
};

function Circle(r) {
    this.setR(r);
}

Circle.prototype = {
  recalcArea: function() {
        this.cacheResult('area', function() { return this.r * this.r * Math.PI; });
    },
  setR: function (r) {
      this.r = r;
      this.invalidateR();
    },
  invalidateR: function() {
        this.recalcArea();
    }
}

Если вам нужна мемоизированная функция, вы можете ее использовать. Переопределение собственности не происходит.

Object.prototype.memoize = function(name, implementation) {
    this[name] = function() {
        var argStr = Array.toString.call(arguments);
        if (typeof(this[name].memo[argStr]) == 'undefined') {
            this[name].memo[argStr] = implementation.apply(this, arguments);
        }
        return this[name].memo[argStr];
    }
};

Обратите внимание, что это зависит от стандартного преобразования массива в строку и часто не работает должным образом. Исправление оставлено в качестве упражнения для читателя.

Моя вторая заявка - это геттеры и сеттеры. Я удивлен, что они еще не были упомянуты. Поскольку официальный стандарт отличается от стандарта де-факто (defineProperty vs. определить [GS] etter), а Internet Explorer почти не поддерживает официальный стандарт, они обычно бесполезны. Может, поэтому их не упомянули. Обратите внимание, что вы можете довольно хорошо комбинировать методы получения и кеширование результатов:

Object.prototype.defineCacher = function(name, _get) {
    this.__defineGetter__(name, function() {
        var result = _get.call(this);
        this.__defineGetter__(name, function() { return result; });
        return result;
    })
};

function Circle(r) {
    this.r = r;
}

Circle.prototype = {
  invalidateR: function() {
        this.recalcArea();
    },
  recalcArea: function() {
        this.defineCacher('area', function() {return this.r * this.r * Math.PI; });
    },
  get r() { return this._r; }
  set r(r) { this._r = r; this.invalidateR(); }
}

var unit = new Circle(1);
unit.area;

Эффективное объединение геттеров, сеттеров и кеширования результатов немного сложнее, потому что вам нужно предотвратить аннулирование или обойтись без автоматического аннулирования при наборе, что и делается в следующем примере. В основном это проблема, если изменение одного свойства приведет к аннулированию нескольких других (представьте, что в этих примерах есть свойство «диаметр»).

Object.prototype.defineRecalcer = function(name, _get) {
  var recalcFunc;
  this[recalcFunc='recalc'+name.toCapitalized()] = function() {
    this.defineCacher(name, _get);
  };
  this[recalcFunc]();
  this.__defineSetter__(name, function(value) {
      _set.call(this, value);
      this.__defineGetter__(name, function() {return value; });
  });
};

function Circle(r) {
    this.defineRecalcer('area',
             function() {return this.r * this.r * Math.PI;},
             function(area) {this._r = Math.sqrt(area / Math.PI);},
    );
    this.r = r;
}

Circle.prototype = {
  invalidateR: function() {
        this.recalcArea();
    },
  get r() { return this._r; }
  set r(r) { this._r = r; this.invalidateR(); }
}

Шаблон модуля

<script type = "text/javascript">
(function() {

function init() {
  // ...
}

window.onload = init;
})();
</script>

Переменные и функции, объявленные без оператора var или вне функции, будут определены в глобальной области видимости. Если переменная / функция с таким же именем уже существует, она будет автоматически переопределена, что может привести к очень трудным для поиска ошибкам. Распространенное решение - заключить все тело кода в анонимную функцию и немедленно выполнить ее. Таким образом, все переменные / функции определены в области действия анонимной функции и не попадают в глобальную область видимости.

Чтобы явно определить переменную / функцию в глобальной области видимости, они должны иметь префикс window:

window.GLOBAL_VAR = 12;
window.global_function = function() {};

Пространства имён

В более крупных приложениях или фреймворках JavaScript может быть полезно организовать код в пространствах имен. В JavaScript нет встроенного модуля или концепции пространства имен, но его легко эмулировать с помощью объектов JavaScript. Это создаст пространство имен ns и присоединит к нему функцию foo.

if (!window.ns) {
  window.ns = {};
}

window.ns.foo = function() {};

Обычно в проекте используется один и тот же префикс глобального пространства имен, а для каждого файла JavaScript используются подпространства имен. Имя подпространства имен часто совпадает с именем файла.

Заголовок файла ns/button.js может выглядеть так:

if (!window.ns) {
  window.ns = {};
}
if (!window.ns.button) {
  window.ns.button = {};
}

// attach methods to the ns.button namespace
window.ns.button.create = function() {};

Вот простой способ думать об «этом». 'This' внутри функции будет ссылаться на будущие экземпляры объекта функции, обычно созданные с помощью оператора new. Итак, ясно, что «this» внутренней функции никогда не будет относиться к экземпляру внешней функции.

Вышесказанное должно уберечь человека от неприятностей. Но есть более сложные вещи, которые вы можете сделать с этим.

Пример 1:

     function DriveIn()
     {
          this.car = 'Honda';
          alert(this.food);  //'food' is the attribute of a future object 
                             //and DriveIn does not define it.
     }

     var A = {food:'chili', q:DriveIn};  //create object A whose q attribute 
                                         //is the function DriveIn;

     alert(A.car); //displays 'undefined' 
     A.q();        //displays 'chili' but also defines this.car.
     alert(A.car); //displays 'Honda' 

Правило этого:

Всякий раз, когда функция вызывается как атрибут объекта, любое вхождение this внутри функции (но вне любых внутренних функций) относится к объекту.

Нам нужно прояснить, что «Правило этого» применяется даже при использовании оператора new. За кулисами new прикрепляет this к объекту через атрибут конструктора объекта.

Пример 2:

      function Insect ()
      {
           this.bug = "bee";
           this.bugFood = function()
           {
               alert("nectar");
           }
       }

      var B = new Insect();
      alert(B.constructor); //displays "Insect"; By "The Rule of This" any
                            //ocurrence of 'this' inside Insect now refers 
                            //to B.    

Чтобы сделать это еще яснее, мы можем создать экземпляр Insect без использования оператора new.

Пример 3:

   
    var C = {constructor:Insect};  //Assign the constructor attribute of C, 
                                   //the value Insect.
    C.constructor();               //Call Insect through the attribute. 
                                   //C is now an Insect instance as though it 
                                   //were created with operator new. [*]
    alert(C.bug);                  //Displays "bee." 
    C.bugFood();                   //Displays "nectar." 

[*] Единственное различие, которое я могу различить, состоит в том, что в примере 3 'конструктор' является перечислимым атрибутом. Когда используется оператор new, «конструктор» становится атрибутом, но его нельзя перечислить. Атрибут перечислим, если операция for-in «for (имя переменной в объекте)» возвращает имя атрибута.

Знайте, сколько параметров ожидает функция

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

Что ж, это не особенная функция, но очень полезная:

Показывает выбираемые и отформатированные предупреждения:

alert(prompt('',something.innerHTML ));

Это не всегда хорошая идея, но вы можете преобразовать большинство вещей с помощью кратких выражений. Важным моментом здесь является то, что не каждое значение в JavaScript является объектом, поэтому эти выражения будут успешными, если доступ к элементам не-объектов, таких как null и undefined, завершится ошибкой. В частности, будьте осторожны с typeof null == "object", но вы не можете использовать null.toString () или ("name" в null).

Преобразуйте что угодно в число:

+anything
Number(anything)

Преобразуйте что угодно в четырехбайтовое целое число без знака:

anything >>> 0

Преобразуйте что угодно в строку:

'' + anything
String(anything)

Преобразуйте что угодно в логическое значение:

!!anything
Boolean(anything)

Кроме того, использование имени типа без "new" по-разному ведет себя для String, Number и Boolean, возвращая примитивное число, строку или логическое значение, но с "new" они возвращают "упакованные" типы объектов, которые почти бесполезны.

Мой любимый трюк - использовать apply для выполнения обратного вызова метода объекта и поддержания правильной переменной this.

function MakeCallback(obj, method) {
    return function() {
        method.apply(obj, arguments);
    };
}

var SomeClass = function() { 
     this.a = 1;
};
SomeClass.prototype.addXToA = function(x) {
     this.a = this.a + x;
};

var myObj = new SomeClass();

brokenCallback = myObj.addXToA;
brokenCallback(1); // Won't work, wrong "this" variable
alert(myObj.a); // 1


var myCallback = MakeCallback(myObj, myObj.addXToA);
myCallback(1);  // Works as expected because of apply
alert(myObj.a); // 2

Хм, я не прочитал всю тему, хотя она для меня довольно интересна, но позвольте мне сделать небольшое пожертвование:

// forget the debug alerts
var alertToFirebugConsole = function() {
    if ( window.console && window.console.info ) {
        window.alert = console.info;
    }
}

функция может иметь методы.

Я использую этот шаблон отправки форм AJAX.

var fn = (function() {
        var ready = true;
        function fnX() {
            ready = false;
            // AJAX return function
            function Success() {
                ready = true;
            }
            Success();
            return "this is a test";
        }

        fnX.IsReady = function() {
            return ready;
        }
        return fnX;
    })();

    if (fn.IsReady()) {
        fn();
    }

Считается, что JavaScript очень хорошо раскрывает весь свой объект, независимо от того, является ли его объект окна.

Поэтому, если я хочу переопределить предупреждение браузера с помощью всплывающего окна JQuery / YUI div, которое также принимает строку в качестве параметра, это можно сделать, просто используя следующий фрагмент.

function divPopup(str)
{
    //code to show the divPopup
}
window.alert = divPopup;

С этим изменением все вызовы alert () будут показывать хорошее новое всплывающее окно на основе div, а не конкретное предупреждение браузера.

Дзен замыканий

Другие люди упомянули закрытия. Но удивительно, как много людей знают о замыканиях, пишут код с использованием замыканий, но все еще имеют неправильное представление о том, что такое замыкания на самом деле. Некоторые люди путают первоклассные функции с замыканиями. Третьи видят в нем своего рода статическую переменную.

Для меня замыкание - это своего рода глобальная переменная 'частный'. Это своего рода переменная, которую некоторые функции считают глобальной, но не видят другие. Я знаю, что с описанием лежащего в основе механизма ничего не происходит, но именно так он себя чувствует и ведет себя именно так. Проиллюстрировать:

// Say you want three functions to share a single variable:

// Use a self-calling function to create scope:
(function(){

    var counter = 0; // this is the variable we want to share;

    // Declare global functions using function expressions:
    increment = function(){
        return ++counter;
    }
    decrement = function(){
        return --counter;
    }
    value = function(){
        return counter;
    }
})()

теперь три функции increment, decrement и value совместно используют переменную counter, при этом counter не является реальной глобальной переменной. Это истинная природа закрытия:

increment();
increment();
decrement();
alert(value()); // will output 1

Вышеупомянутое не совсем полезное использование замыканий. На самом деле, я бы сказал, что использование этого способа - антипаттерн. Но это полезно для понимания природы замыканий. Например, большинство людей попадают в ловушку, когда они пытаются сделать что-то вроде следующего:

for (var i=1;i<=10;i++) {
    document.getElementById('span'+i).onclick = function () {
        alert('this is span number '+i);
    }
}
// ALL spans will generate alert: this span is span number 10

Это потому, что они не понимают природы замыканий. Они думают, что передают значение i в функции, хотя на самом деле функции совместно используют одну переменную i. Как я уже сказал, особый вид глобальной переменной.

Чтобы обойти это, вам нужно отделить * закрытие:

function makeClickHandler (j) {
    return function () {alert('this is span number '+j)};
}

for (var i=1;i<=10;i++) {
    document.getElementById('span'+i).onclick = makeClickHandler(i);
}
// this works because i is passed by reference 
// (or value in this case, since it is a number)
// instead of being captured by a closure

* примечание: я не знаю здесь правильной терминологии.

Я знаю, что опаздываю на вечеринку, но я просто не могу поверить, что о полезности оператора + не упоминалось, кроме «преобразования чего-либо в число». Может быть, вот насколько хорошо эта функция скрыта?

// 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 - переопределение функций по умолчанию

Вот код для переопределения функции window.alert с помощью Виджет диалога пользовательского интерфейса jQuery. Я сделал это как плагин jQuery. И вы можете прочитать об этом в моем блоге; altAlert, плагин jQuery для персонализированных предупреждающих сообщений..

jQuery.altAlert = function (options)  
{  
    var defaults = {  
        title: "Alert",  
        buttons: {  
            "Ok": function()  
            {  
                jQuery(this).dialog("close");  
            }  
        }  
    };  

    jQuery.extend(defaults, options);  

    delete defaults.autoOpen;  

    window.alert = function ()  
    {  
        jQuery("<div />", {
            html: arguments[0].replace(/\n/, "<br />")
        }).dialog(defaults);  
    };  
};

Кэширование возвращаемого значения простой автономной функции:

function isRunningLocally(){
    var runningLocally = ....; // Might be an expensive check, check whatever needs to be checked.

    return (isRunningLocally = function(){
        return runningLocally;
    })();
},

Дорогостоящая часть выполняется только при первом вызове, и после этого функция возвращает это значение. Конечно, это полезно только для функций, которые всегда возвращают одно и то же.

В функции вы можете вернуть саму функцию:

function showSomething(a){
   alert(a);
   return arguments.callee;
}

// Alerts: 'a', 'b', 'c'
showSomething('a')('b')('c');

// Or what about this:
(function (a){
   alert(a);
   return arguments.callee;
}​)('a')('b')('c');​​​​

Я не знаю, когда это может быть полезно, в любом случае, это довольно странно и весело:

var count = function(counter){
   alert(counter);
   if (counter < 10){
      return arguments.callee(counter+1);
   }
   return arguments.callee;
};

count(5)(9); // Will alert 5, 6, 7, 8, 9, 10 and 9, 10

На самом деле, похоже, что Фреймворк FAB для Node.js реализовал эту функцию; см., например, Эта тема.

Закрытие:

function f() { 
    var a; 
    function closureGet(){ return a; }
    function closureSet(val){ a=val;}
    return [closureGet,closureSet];
}

[closureGet,closureSet]=f(); 
closureSet(5);
alert(closureGet()); // gives 5

closureSet(15);
alert(closureGet()); // gives 15

Дело здесь не в так называемом деструктурирующем назначении ([c,d] = [1,3] эквивалентно c=1; d=3;), а в том факте, что вхождения a в closureGet и closureSet по-прежнему относятся к одной и той же переменной. Даже после того, как closureSet присвоил a новое значение!

Это скрытая функция jQuery, а не Javascript, но поскольку вопрос о "скрытых функциях jQuery" никогда не возникает ...

Вы можете определить свои собственные селекторы :something в jQuery:

$.extend($.expr[':'], {
  foo: function(node, index, args, stack) {
    // decide if selectors matches node, return true or false
  }
});

Для выбора с использованием :foo, такого как $('div.block:foo("bar,baz") span'), функция foo будет вызываться для всех узлов, которые соответствуют уже обработанной части селектора. Смысл аргументов:

• node содержит текущий узел
• index - это индекс узла в наборе узлов.
• args - это массив, который полезен, если у селектора есть аргумент или несколько имен:
  • args[0] - это весь текст селектора (например, :foo("bar, baz"))
  • args[1] - это имя селектора (например, foo).
  • args[2] - это символ кавычки, используемый для обертывания аргумента. (например, " для :foo("bar, baz")) или пустая строка, если нет кавычек (:foo(bar, baz)) или undefined, если аргумента нет
  • args[3] - это аргумент, включая любые кавычки (например, "bar, baz") или undefined, если нет аргументов
• stack - это набор узлов (массив, содержащий все узлы, которые совпадают в этой точке)

Функция должна вернуть true, если селектор совпадает, иначе false.

Например, следующий код позволит выбирать узлы на основе полнотекстового поиска по регулярному выражению:

$.extend($.expr[':'], {
  matches: function(node, index, args, stack) {
    if (!args.re) { // args is a good place for caching
      var re = args[3];
      if (args[2]) { // get rid of quotes
        re = re.slice(1,-1);
      }
      var separator = re[0];
      var pos = re.lastIndexOf(separator);
      var modifiers = re.substr(pos+1);
      var code = re.substr(1, pos-1);
      args.re = new RegExp(code, modifiers);
    }
    return $(node).text().match(args.re);
  }
});

// find the answers on this page which contain /**/-style comments
$('.answer .post-text code:matches(!/\*[\s\S]*\*/!)');

Вы можете достичь аналогичного эффекта с версией обратного вызова .фильтр(), но пользовательские селекторы гораздо более гибкие и обычно более читабельные.

Когда вы пишете обратные вызовы, у вас много кода, который будет выглядеть так:

callback: function(){
  stuff(arg1,arg2);
}

Вы можете использовать приведенную ниже функцию, чтобы сделать ее несколько чище.

callback: _(stuff, arg1, arg2) 

Он использует менее известную функцию объекта Function JavaScript, apply.

Он также показывает другой символ, который вы можете использовать как имя функции: _.

function _(){
        var func;
        var args = new Array();
        for(var i = 0; i < arguments.length; i++){
                if ( i == 0){
                        func = arguments[i];
                } else {
                        args.push(arguments[i]);
                }
        }
        return function(){
                return func.apply(func, args);
        }
}