js中必须用分号的地方——由一个题目引起的思考

这篇文章是由一个题目引起的思考，那就先来看看题目

var myObject = {
foo: "bar",
func: function() {
var self = this;
console.log(this.foo);
console.log(self.foo);
(function() {
console.log(this.foo);
console.log(self.foo);
}());
}
};
myObject.func();

求这段代码输出什么

答案是：

bar
bar
undefined
bar

第三个为什么是undefined呢，这个就涉及到js中this的用法了，为了明显，我们修改一下输出的对象

var myObject = {
foo: "bar",
func: function() {
var self = this;
console.log(this.foo);
console.log(self.foo);
(function() {
console.log(this);
})()
}
}
myObject.func();

输出的结果：

bar
bar
Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}

也就是说，this指向了window对象。熟悉this属性的都知道，this属性只有在函数执行的时候才能确定，指向调用函数的对象。而自执行函数，自动执行，虽然是在函数内定义的，调用函数的对象并不是myProject,所以this还是指向全局对象的。

题目说完了，现在来看一下遇到的问题。

当时我是想自己测试一下的，然后我就自己打了一遍代码，因为js可以不用分号，这也是我的个人习惯，所以这次就结结实实踩了个坑…说多了，看代码

var myObject = {
foo: "bar",
func: function() {
var self = this
console.log(this.foo)
console.log(self.foo)
(function() {
console.log(this.foo)
console.log(self.foo)
})()
}
}
myObject.func()

运行结果呢？

bar
bar
Uncaught TypeError: console.log(...) is not a function

报错了，然后研究了好久都没有看懂，唯一区别就是分号，抱着试试看的态度，在自执行函数前面加了个分号，然后通过了。然后不服气，又写了个测试：

var selfarg = {
name: "llx"
}

(function(arg, undefined) {
console.log(arg)
})(selfarg)

不服不行，报错了

Uncaught TypeError: (intermediate value) is not a function

，加上分号就没问题了。他说接收的变量不是function，ok改成function

function selfarg() {
return {
name: "llx"
}
}

(function(arg) {
console.log(arg)
})(selfarg)

console.log(selfarg)

方便对比，顺便直接打印了一下这个方法。打印成功了。

然后查了一下，在js中必须用分号的地方：

非第一行的+、-、/、()、[]开头时，前面要有分号