Javascript объясняет использование 'this'

Question

Я изучаю javascript и пытаюсь понять, почему javascript использует this.vanilla.

Это то же самое, как написание:

var SomeVariable = [1, "bean", vanilla ? vanilla : "Madagascar Bourbon"]; 

Кажется очень запутанным, используя такое же имя в качестве параметра vanilla.

var VanillaBean = function(vanilla, cinnamon) { 
    this.vanilla = [1, "bean", vanilla ? vanilla : "Madagascar Bourbon"]; 
} 

Answer 1

Здесь VanillaBean это функция, которая принимает два аргумента, называемые vanilla и cinnamon. Это создаст объект, по крайней мере, одно свойство, vanilla при вызове, как показано ниже:

var flavour = new VanillaBean("cheap", 250); 

flavour.vanilla тогда будет [1, "bean", "cheap"].

(Спасибо @FelixKling и @ t.niese.)

this ссылается на объект, он создает, а не какой-либо другой vanilla собственности чего-либо другого.

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

Answer 2

var a = {}; 

this в объекте:

a.test = function() { return this; }; 

в этом случае this будет a, потому что function является членом.

a.t = function() { 
    var b = function() { return this; }; 
    b(); 
}; 

В этом случае b не является членом ничего так this является window.

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

Дополнительно вы можете временно изменить вызов владельца.

var b = function() {}; 
var c = { d: 1 }; 
b.call(c); 

Вызов функции временно изменить владельца c и this будет c.

Создание нового экземпляра.

function E() { this.h = 2; } 
E.prototype = { f: 1 }; 
E.prototype.g = function() { return this; }; 
var e = new E(); 
e.g(); 

В этом случае this является e. prototype - это структура, которая дает вам возможность описать, как будет выглядеть исходный объект. Здесь будет { h: 2, g: func, f: 1 }.

Answer 3

При использовании в html-элементах this относится к элементу в DOM.

Пример:

<script type="text/javascript"> 
    function hover(domElement) { 
     domElement.style.backgroundColor = '#CCC'; 
    } 
</script> 
<div onmouseover="hover(this);">Hover me</div> 

Когда this используется в невозврат функции, функция становится объект-конструктором, а this относится к неявно созданному объекту, который автоматически получает возвращается, когда функция вызывается с new.

Пример:

function Point(x, y) { 
    this.x = x || 0; 
    this.y = y || 0; 
    this.distance = function (point) { 
     return Math.sqrt(
      Math.pow(point.x - this.x, 2) + 
      Math.pow(point.y - this.y, 2) 
     ); 
    }; 
} 

var a = new Point(10, 10); 
var b = new Point(100, 100); 

document.write(a.distance(b)); 

Та же функция без this и new:

function Point(x, y) { 
    obj = {}; 

    obj.x = x || 0; 
    obj.y = y || 0; 
    obj.distance = function (point) { 
     return Math.sqrt(
      Math.pow(point.x - this.x, 2) + 
      Math.pow(point.y - this.y, 2) 
     ); 
    }; 

    return obj; 
} 

var a = Point(10, 10); 
var b = Point(100, 100); 

document.write(a.distance(b));