JS函数this的用法实例分析

深入JS函数中的this关键字

在JavaScript的世界里，函数是一种可以重复调用的代码块。当我们将函数赋值给对象的属性时，这个函数就摇身一变成为该对象的方法。这时，this关键字就起到了至关重要的作用。那么，this究竟是什么呢？其实，this是一个指向执行环境作用域的指针，也可以称之为上下文。

让我们通过一些实例来this的用法。

想象一下这样一个场景，你有一个对象m，你给它赋予了一个属性title和一个方法show。这个方法会弹出一个对话框显示对象m的title属性的值。

代码如下：

var m = {};

m.title = 'title';

m.show = function() {

alert(this.title);

}

m.show(); // 弹出对话框显示 "title"

在这个例子中，函数show()是通过对象m来调用的，所以函数内部的this就指向了对象m。

那么，在全局环境中，函数又是如何表现的呢？在全局环境中，我们可以把全局变量理解为window对象的属性，全局函数则是window对象的方法。

这里有一个关于SEO优化的例子：

var m = {};

var a = {};

m.id = 'mmm';

a.id = 'aaa';

m.show = function() {

alert(this.id);

}

a.show = m.show; // a现在有了和m相同的show方法

a.show(); // 弹出对话框显示 "aaa"

在这个例子中，当我们调用a.show()时，this指向了对象a，因为函数是通过对象a来调用的。这是因为函数是一个对象，可以被赋值给其他对象作为方法使用。当我们调用这个方法时，this就会指向调用该方法的对象。所以在这个例子中，即使我们使用了相同的函数，但是因为调用它的对象不同，所以this指向的对象也不同。因此弹出的对话框显示的是不同对象的id属性。理解了这一点之后，我们就可以更好地利用this来组织我们的代码逻辑了。在JavaScript中还有很多关于this的复杂用法和高级技巧需要我们去学习和。JavaScript中的函数参数传递

在JavaScript中，当我们谈论函数参数传递时，经常会遇到按值和按引用传递的混淆。让我们深入理解这个问题，并通过一些实例来揭示其中的奥秘。

让我们看一个关于JavaScript对象赋值和函数传递的例子。当我们为一个变量分配一个对象，然后在函数中更改这个对象的属性时，你可能会认为这是按引用传递的。但实际上，JavaScript中的对象参数是通过值来传递的，传递的是对象的引用，而非对象本身。

例如：

```javascript

var c = {};

c.prop = true;

var showProp = function(obj) {

obj.prop = false;

}

showProp(c);

alert(c.prop); // 这将弹出false

```

在这个例子中，尽管我们在函数`showProp`内部更改了对象的属性，但外部的`c`对象的属性也发生了变化。这是因为我们传递的是对象的引用，而非对象本身。但请注意，如果我们尝试在函数内部重新分配这个引用，如创建一个新的对象并尝试返回它，外部的引用不会受到影响。例如：

```javascript

var c = {};

c.prop = true;

var showProp = function(obj) {

obj = new Object(); // 这里我们创建了一个新的对象并尝试改变引用

obj.prop = false; // 对新对象的属性进行设置

return obj; // 返回新对象引用，但这不会改变外部的c引用

}

showProp(c);

alert(c.prop); // 这将弹出true，因为外部的c引用并未改变

```

这里的关键在于理解函数参数传递的方式。在JavaScript中，基本类型（如数字、字符串等）是按值传递的。而对于对象，传递的是对象的引用。当我们尝试在函数内部改变这个引用指向的对象时（如上例中的`obj.prop = false`），外部的引用会受到影响。但如果我们在函数内部重新分配这个引用（如创建一个新的对象并尝试返回它），外部的引用不会受到影响。这是因为我们在函数内部创建的是新的引用，而非改变原有的引用。希望本文所述能对大家的JavaScript程序设计有所帮助。这也是理解JavaScript中复杂操作和响应式编程的重要基础。通过深入理解这些概念，我们可以更好地设计和编写高效、可维护的JavaScript代码。