《JS原理、方法与实践》- 点运算符与this关键字

点运算符

点运算符可用来操作对象的属性。这里的操作可以分为获取和赋值两种类型。在赋值的情况下，如果对象原来没有所操作的属性则会添加，如果有则会修改其值。
代码示例：

var person = { name: 'zzh' };

person.age = 18;

console.log(person.name); // zzh
person.name = 'David';
console.log(person.name); // David

测试结果

this的含义

书上说的三种子类型也不清楚是什么，暂且不做理解，只记一句话：

“谁直接调用方法，this就指向谁”。也就是说方法的点前面的对象就是this。
代码示例：

var color = 'red';

function Obj () {
    var color = 'balck';
}

Obj.color = 'green';
Obj.prototype.logColor = function () {
    console.log(this.color);
}

var o = new Obj();
o.color = 'blue';
o.logColor(); // blue

例子中一个有4个color， 一个是全局变量，一个是Obj的局部变量，一个是Obj的属性，还有一个是Obj创建的实例对象o的属性。logColor方法是Obj的prototype中的方法属性，其中打印了this.color的值。在调用o.logColor()时，这里使用使用对象o中的color属性，也就是blue,这是因为logColor方法是被o对象直接调用的。

关联方法后的this

代码示例：

function logColor() {
    console.log(this.color);
}

function Obj () {}
var o = new Obj();

Obj.color = 'red';
o.color = 'blud';

Obj.logColor = logColor;
o.logColor = logColor;

Obj.logColor(); // red
o.logColor(); // blue

谁调用方法this就指向谁！！！

内部函数中的this

代码示例：

var v = 1;
function Program () {
    var v = 2;
    this.v = 3;
}

Program.prototype.logV = function () {
    function innerLog () {
        console.log(this.v);
    }
    innerLog();
}

var pro = new Program();

pro.logV();  // 1

若希望打印出Program的this.v 即3， 有三种处理方法：
方法一：

Program.prototype.logV = function () {
    var instance = this;
    function innerLog () {
        console.log(instance.v);
    }
    innerLog();
}

方法二：

Program.prototype.logV = function () {
    function innerLog () {
        console.log(this.v);
    }
    this.innerLog = innerLog;
    this.innerLog();
}

方法三：

Program.prototype.logV = function () {
    function innerLog (v) {
        console.log(v);
    }
    innerLog(this.v);
}

对象的属性不可以继承

属性不可以继承指的是，如果对象有多个层次，那么父子对象里的属性不可以相互继承和调用。
代码示例：

function logV() {
    console.log(this.v);
}

var obj = {v: 1};
obj.sonObj = {};

obj.logV = logV;
obj.sonObj.logV = logV;

obj.logV(); // 1
obj.sonObj.logV(); // undefined

之所以为undefined, 也是this的一种应用，此时obj.sonObj并没有定义属性v且没有继承ovj的v，所以打印其结果为undefined.

如果觉得文章写得还行，请点个赞。如果想与我进一步交流，可以关注我的公众号或者加我的微信。

个人微信
公众号_前端微说.jpg