this
- одна из неправильно понятых концепций в JavaScript, потому что она ведет себя совсем не так, как с места на место. Просто this
ссылается на «владельца» функции, которую мы сейчас выполняем.
this
помогает получить текущий объект (контекст выполнения a.k.a.), с которым мы работаем. Если вы понимаете, в каком объекте выполняется текущая функция, вы можете легко понять, что текущий this
is
var val = "window.val"
var obj = {
val: "obj.val",
innerMethod: function () {
var val = "obj.val.inner",
func = function () {
var self = this;
return self.val;
};
return func;
},
outerMethod: function(){
return this.val;
}
};
//This actually gets executed inside window object
console.log(obj.innerMethod()()); //returns window.val
//Breakdown in to 2 lines explains this in detail
var _inn = obj.innerMethod();
console.log(_inn()); //returns window.val
console.log(obj.outerMethod()); //returns obj.val
Выше мы создаем 3 переменные с одинаковым именем «val». Один в глобальном контексте, один внутри obj и другой внутри innerMethod obj. JavaScript разрешает идентификаторы в определенном контексте, поднимая цепочку областей действия из локального глобального.
Несколько мест, где this
можно дифференцировать
var status = 1;
var helper = {
status : 2,
getStatus: function () {
return this.status;
}
};
var theStatus1 = helper.getStatus(); //line1
console.log(theStatus1); //2
var theStatus2 = helper.getStatus;
console.log(theStatus2()); //1
Когда line1, JavaScript устанавливает контекст выполнения (EC) для вызова функции, устанавливая this
объекту, на который ссылается все, что было до последнего «.». поэтому в последней строке вы можете понять, что a()
был выполнен в глобальном контексте, который является window
.
this
можно использовать для ссылки на создаваемый объект
function Person(name){
this.personName = name;
this.sayHello = function(){
return "Hello " + this.personName;
}
}
var person1 = new Person('Scott');
console.log(person1.sayHello()); //Hello Scott
var person2 = new Person('Hugh');
var sayHelloP2 = person2.sayHello;
console.log(sayHelloP2()); //Hello undefined
Когда выполняется новый Person()
, создается совершенно новый объект. Вызывается Person
и его this
установлен для ссылки на этот новый объект.
function testFunc() {
this.name = "Name";
this.myCustomAttribute = "Custom Attribute";
return this;
}
var whatIsThis = testFunc();
console.log(whatIsThis); //window
var whatIsThis2 = new testFunc();
console.log(whatIsThis2); //testFunc() / object
console.log(window.myCustomAttribute); //Custom Attribute
Если мы пропустим ключевое слово new
, whatIsThis
ссылается на самый глобальный контекст, он может найти (window
)
Если обработчик события является встроенным, this
ссылается на глобальный объект
При добавлении обработчика событий через JavaScript, this
относится к элементу DOM, который генерирует событие.
.apply()
.call()
и .bind()
var that = this
в JavaScript Я не думаю, что это возможно сделать CSS iframed на странице. Вам нужно будет добавить отзывчивый CSS на страницу, которую вы пытаетесь встроить. Так как это созданный Google образ, который не кажется вероятным, что у вас будет доступ к этому. То, что вы могли бы попробовать, это просто загрузить изображение и поместить его на квадратный квадрат в качестве изображения, а не iframe.
Я не уверен, что данные изображения являются динамическими, что может повлиять на то, что вы можете делать. Думали ли вы оглядываться на другие графические услуги? Там может быть что-то, что связано с листами Google или если вы знаете javascript достаточно, вы можете создавать свои собственные графики с помощью googles api.