老生常谈JavaScript面向对象基础与this指向问题

你好，关于“老生常谈JavaScript面向对象基础与this指向问题”的攻略如下：

JavaScript对象基础

1.对象

对象是JavaScript中最重要的数据类型之一。对象可以拥有属性和方法，属性是对象的特征，属性的值可以是基本类型、对象类型或函数类型。方法是一种可以访问对象中属性的函数。

JavaScript对象可以使用对象字面量、构造函数和Object.create()方法创建。对象字面量是一种最简单的创建对象的方式，例如：

var person = {
  name: 'Tom',
  age: 18,
  sayHello: function() {
    console.log('Hello, my name is ' + this.name + ' and I am ' + this.age + ' years old.');
  }
};

构造函数是一种创建对象的函数，例如：

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function() {
    console.log('Hello, my name is ' + this.name + ' and I am ' + this.age + ' years old.');
  }
}

var person = new Person('Tom', 18);

Object.create()方法是一种基于原型的创建对象的方式，例如：

var person = Object.create({
  name: 'Tom',
  age: 18,
  sayHello: function() {
    console.log('Hello, my name is ' + this.name + ' and I am ' + this.age + ' years old.');
  }
});

2.原型和原型链

每个JavaScript对象都有一个原型对象，它是JavaScript中实现继承的基础。可使用对象的__proto__属性来访问其原型对象。

var person = {
  name: 'Tom',
  age: 18,
  sayHello: function() {
    console.log('Hello, my name is ' + this.name + ' and I am ' + this.age + ' years old.');
  }
};

var student = Object.create(person);
student.major = 'Computer Science';

console.log(student.name);               // 'Tom'
console.log(student.__proto__ === person);// true

原型链是一种对象之间的层级结构，在访问一个对象的属性和方法时，JavaScript会在当前对象、本身的原型、本身原型的原型等逐级查找。如果在查找过程中找到了这个属性或方法，则直接使用返回，否则，继续向上查找。

JavaScript中this的指向问题

this是JavaScript中的一个关键字，它永远指向当前函数的上下文（执行环境）。

1. 默认情况下，this指向全局对象。

console.log(this); // window

1. 作为对象方法调用时，this指向该对象。

var person = {
  name: 'Tom',
  sayHello: function() {
    console.log('Hello, my name is ' + this.name);
  }
};

person.sayHello();  // Hello, my name is Tom

1. 作为构造函数调用时，this指向新创建的对象。

function Person(name) {
  this.name = name;
}

var p = new Person('Tom');
console.log(p.name);  // Tom

1. 作为call()和apply()方法调用时，this指向call()和apply()方法的第一个参数。

function sayHello() {
  console.log('Hello, my name is ' + this.name);
}

var person1 = {
  name: 'Tom'
};

var person2 = {
  name: 'Jerry'
};

sayHello.call(person1);  // Hello, my name is Tom
sayHello.apply(person2); // Hello, my name is Jerry

1. 作为事件处理函数调用时，this指向事件所绑定的元素。

var btn = document.querySelector('button');
btn.addEventListener('click', function() {
  console.log(this.innerHTML);
});

示例说明

示例一：继承

function Animal(name, age) {
  this.name = name;
  this.age = age;
}

Animal.prototype.sayHello = function() {
  console.log('Hello, my name is ' + this.name + ' and I am ' + this.age + ' years old.');
}

function Cat(name, age) {
  Animal.call(this, name, age);
}

Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;

var cat = new Cat('Tom', 2);
cat.sayHello(); // Hello, my name is Tom and I am 2 years old.

在该示例中，我们创建了一个Animal构造函数，然后创建了一个Cat构造函数，它继承自Animal构造函数。通过将Cat的原型对象指定为Animal的一个实例，实现了继承。最后，我们创建了一个Cat实例cat，并调用了它的sayHello()方法，它能够正确输出信息。

示例二：模拟jQuery的链式调用

function jQuery(selector) {
  var elements = document.querySelectorAll(selector);
  this.length = elements.length;
  for (var i = 0; i < this.length; i++) {
    this[i] = elements[i];
  }
}

jQuery.prototype.addClass = function(className) {
  for (var i = 0; i < this.length; i++) {
    this[i].classList.add(className);
  }
  return this;
}

jQuery.prototype.removeClass = function(className) {
  for (var i = 0; i < this.length; i++) {
    this[i].classList.remove(className);
  }
  return this;
}

var $ = function(selector) {
  return new jQuery(selector);
}

$('#box').addClass('box').removeClass('hidden');

在该示例中，我们模拟了jQuery的链式调用方式。首先我们创建了一个jQuery构造函数，它接受一个选择器作为参数，并返回一个类似数组的对象。然后我们在jQuery的原型对象上定义了addClass()和removeClass()方法，这两个方法分别遍历该对象中的元素，依次添加和删除指定的CSS类名。最后我们使用$函数创建了一个jQuery对象，然后通过链式调用方式，先将#box元素添加.box类，然后移除.hidden类。