JS中this的使用

this 前排提示:this只有在执行的时候才能确认,定义时无法被确认。 1. 作为对象属性执行 var name = '李四'; var person = { name: '张三', getName() { console.log(this.name); /...

this

前排提示:this只有在执行的时候才能确认,定义时无法被确认。

1. 作为对象属性执行

var name = '李四';
var person = {
  name: '张三',
  getName() {
    console.log(this.name); // 这个this是啥,不知道,我又没调用这个方法
  }
};

person.getName(); // 此时this为person, 作为对象属性执行,输出张三

2. 作为构造函数执行

function Foo(name) {
  this.name = name; // 此时的this === {}
};
var f = new Foo('张三');

3. 作为普通函数执行

var name = '李四';
var person = {
  name: '张三',
  getName() {
    console.log(this.name)
  }
};
var per = person.getName;
per();
// 此时输出李四而不是张三, this已经为window了,在全局作用域中定义了name变量,自然输出全局的name
// 而不是person对象的name

4. call,apply,bind可以改变this的指向

var p1 = {
  name: '张三',
  getName(age, job) {
    console.log(this.name, age, job);
  }
};
var p2 = {
  name: '李四'
};
p1.getName.call(p2, 18, '前端工程师'); // 输出李四18前端工程师
p1.getName.apply(p2, [18, '前端工程师']); // 输出李四18前端工程师
p2.getName = p1.getName.bind(p2);
p2.getName(18, '前端工程师'); // 输出李四

这里引用下追梦子博客的一些知识

function Fn() {
  this.name = 'fn';
  return {};
}
var f = new Fn();
console.log(f.name); // 输出undefined
function Fn() {
  this.name = 'fn';
  return function () {};
}
var f = new Fn();
console.log(f.name); // 输出undefined
function Fn() {
  this.name = 'fn';
  return undefined;
}
var f = new Fn();
console.log(f.name); // 输出fn
function Fn() {
  this.name = 'fn';
  return 1;
}
var f = new Fn();
console.log(f.name); // 输出fn

上面代码说明了,只要构造函数不返回对象,就不会影响新建的实例。

  • 发表于 2019-03-22 14:40
  • 阅读 ( 146 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除