前言:
JavaScript里边的 this 指向问题,这篇文章帮你搞定!
具体情况分类:
函数没有被上级调用,this指向window
function sayMyName(){
var name = "JavaScript"
console.log(this.name);//undefined
console.log(this.name);//Window
}
sayMyName();
window.sayMyName();
可以简单理解为:一个函数如果直接被调用的话,默认是window调用的,然后this就会指向window,这时候,函数内部去根据this 的指向寻找name属性,这时候发现window中没有,然后就会报 undefined。
函数有被上级调用,this就指向上级对象
var book = {
name: "JavaScript",
getBookName: function(){
return this.name;
}
}
console.log(book.getBookName()); // JavaScript
我们可以理解为 是book 对象调用了getBookName这个函数,所以this指向了这个book对象,然后book对象里边有 name 这个属性,所以就可以正确的返回出来。
对象内嵌套多个对象,外层对象调用函数,函数的this只指向上级对象
var book = {
name: "JavaScript",
computerBook: {
name: "Node.js",
getBookName: function() {
return this.name;
}
}
}
console.log(book.computerBook.getBookName()); //Node.js
var book = {
name: "JavaScript",
computerBook: {
//name: "Node.js",
getBookName: function() {
return this.name;
}
}
}
console.log(book.computerBook.getBookName()); //undifined
我们代码写的是 book 里的 computerBook 对象调用了 getBookName方法,所以 this 指向的就是 computerBook这个对象,因此最终返回的name是 Node.js
第二个调用结果为 undefined,因为computerBook的name属性被删除了,所以,这时候找不到name属性了。
特殊的情况
var book = {
name: "JavaScript",
computerBook: {
name: "Node.js",
getBookName: function() {
return this.name;
}
}
}
// console.log(book.computerBook.getBookName());
var temp = book.computerBook.getBookName;
console.log(temp()); //undefined
console.log(window.temp()); //undefined
大家请看倒数第二行,我们要知道,this只有在运行的时候,才能被确定,所以 temp 指向了getBookName函数,但是temp在执行这个函数的时候,默认是在全局环境下执行的,因此为 window.temp(); ,因此这时候的结果为 undefined !!!
构造函数里边的this
function CreateObj() {
this.name = 'JavaScript';
}
var a = new CreateObj();
console.log(a.name); //JavaScript
new 出来的对象以后,将对象的地址赋值给了 a,所以a里边就有了name 这个属性,并且 this 也指向了 a,所以 就可以从a对象中读取到name属性。
function CreateObject() {
this.name = 'Java';
return 1;
}
var a = new CreateObject();
console.log(a.name); //Java
function CreateObject() {
this.name = 'Java';
return {};//返回对象 可以是 {},null
}
var a = new CreateObject();
console.log(a.name); //undefined
return 出来的是一个对象的话,this就指向这个对象,否则就是函数的实例,对象可以包括 {}、null
感谢观看,如果您对里边的内容有任何疑问,请评论区评论!