《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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值