对象内部的作用域 - 这个

Question

我编写了自己的第一个对象，包括方法，但我并不真正理解其中的作用域。我正在编写一个小应用程序，我将不得不一直使用这些鼠标参数。我只想能够通过简单的方式访问这些值

let mouse_positionX = mouse.pos.x;

我的第一次尝试：

function Mouse() {

  this.now = { x: 0, y: 0};

  this.start = { x: 0, y: 0};

  this.stop = { x: 0, y: 0}

  this.delta = { x: 0, y: 0};

  let getDelta = function(e) {

    return { x: (e.clientX - this.start.x), y:(e.clientY - this.start.y) };

  }

  let move = function(e) {

    this.now = { x: e.clientX, y: e.clientY };

    this.delta = getDelta(e);

  }

  let start = function(e) {

    document.addEventListener('mousemove', move, false);

    this.start = { x: e.clientX, y: e.clientY };

  }

  let stop = function(e) {

    this.stop = { x: e.clientX, y: e.clientY };

    this.delta = getDelta(e);

    document.removeEventListener('mousemove', move, false);

  }

  document.addEventListener('mousedown', start, false);

  document.addEventListener('mouseup', stop, false);

}

const mouse = new Mouse();

但这不起作用。this其中一个“私有”函数的内部指向window对象本身而不是对象本身：

let start = function(e) {

    document.addEventListener('mousemove', move, false);

    this.start = { x: e.clientX, y: e.clientY };

    console.log(this); // window object

  }

所以我使用了另一个变量：_self = this在函数之外。_self在函数内部可用：

function Mouse() {

  this.now = { x: 0, y: 0};

  this.start = { x: 0, y: 0};

  this.stop = { x: 0, y: 0}

  this.delta = { x: 0, y: 0};

  let _self = this;

  let getDelta = function(e) {

    return { x: (e.clientX - _self.start.x), y:(e.clientY - _self.start.y) };

  }

  let move = function(e) {

    _self.now = { x: e.clientX, y: e.clientY };

    _self.delta = getDelta(e);

  }

  let start = function(e) {

    document.addEventListener('mousemove', move, false);

    _self.start = { x: e.clientX, y: e.clientY };

  }

我对这种对象用法不熟悉，所以我有两个问题。我找不到具体的答案，或者我不知道要搜索什么。

A：为什么this里面的一个函数是指向window对象而不是对象本身？

B：为这样的事情使用对象通常是个坏主意（并且还绑定到对象内部的文档）吗？

Answer 1

A：浏览器中的全局范围始终是window乙：您不是在使用对象，而是在使用函数。您可以通过在其中创建带有函数的对象来获得很多这种功能。var Animal = {  type: 'Invertebrates', // Default value of properties  displayType: function() {  // Method which will display type of Animal    console.log(this.type);  }};var animal1 = Object.create(Animal);animal1.displayType(); // Output:Invertebratesvar fish = Object.create(Animal);fish.type = 'Fishes';fish.displayType(); // Output:Fishes