面向对象原型原型链 this

来源：https://www.cnblogs.com/laijinquan/p/11451919.html

我们所熟知的面向对象语言如 C++、Java 都有类的的概念，类是实例的类型模板，比如
Student
表示学生这种类型，而不表示任何具体的某个学生，而

实例就是根据这个类型创建的一个具体的对象

，比如zhangsan、lisi，由类生成对象体现了抽象模板到具体化的过程，这叫做
基于
类的
面向对象
方式，而

JavaScript 没有类的概念，是基于原型的面向对象方式（虽然 Es6 增加了 class，实质是对原型方式的封装）

。总结起来就是以下两点：

在基于类的面向对象方式中，对象（object）依靠类（class）来产生。

在基于原型的面向对象方式中，对象（object）则是依靠构造函数（constructor）和原型（prototype）构造出来的。

面向对象语言的第一个特性毫无疑问是封装，在 JS 中，封装的过程就是把一些属性和方法放到对象中“包裹”起来，那么我们要怎么去封装属性和方法，或者说怎么去创建对象呢？下面用逐步推进的方式阐述：

对象字面量 –> 工厂模式 –> 构造函数 –> 原型模式 –> 构造函数+原型模式

面向对象

对象字面量

JS中创建对象最原始的方式有两种：

1

对象字面量

var  person = {
    name: "leon",
    age: "20",

    greeting: function() {
      alert('Hi!');
    }
}

2

为Object实例添加属性方法

var person = new Object();
person.name = "leon";
person.age = "20";

person.greeting = function() {
  alert('Hi!');
};

优点：代码简单

缺点：创建多个对象会产生大量的代码，编写麻烦，且并没有实例与原型的概念。

解决办法：工厂模式。

工厂模式

工厂模式是编程领域一种广为人知的
设计模式
，它抽象了创建具体对象的过程。JS 中创建一个函数，把创建新对象、添加对象属性、返回对象的过程放到这个函数中，用户只需调用函数来生成对象而无需关注对象创建细节，这叫工厂模式：

function createPerson(name, age) {
  var person = new Object();
  person.name = name;
  person.age = age;

  person.greeting = function() {
    alert('Hi!');
  };
  return person;
}

var person1 = createPerson("leon", "20");

优点：工厂模式解决了对象字面量创建对象代码重复问题，创建相似对象可以使用同一API。

缺点：因为是调用函创建对象，无法识别对象的类型。

解决办法：构造函数

构造函数

JS 中构造函数与其他函数的唯一区别，就在于调用它的方式不同。任何函数，只要通过new 操作符来调用，那它就可以作为构造函数。来看下面的例子：

function Person(name, age) {
  this.name = name;
  this.age = age;
  
  this.greeting = function() {
    alert('Hi!');
  };
  // return this;
}

var person1 = new Person("leon", "20");
var person2 = new Person("jack", "21");

通过构造函数new一个实例经历了四步：

创建一个新对象；

将构造函数内的this绑定到新对象上；

为新对象添加属性和方法；

返回新对象（JS 引擎会默认添加 return this;）。

而通过构造函数创建的对象都有一个

constructor

属性，它是一个指向构造函数本身的指针，因此就可以检测对象的类型啦。

alert(person1.constructor === Person) //true

alert(person1 instanceof Person) // true

但是仍然存在问题：

alert(person1.greeting == person2.greeting) //false

同一个构造函数中定义了greeting()，而不同实例上的同名函数却是不相等的，意味着这两个同名函数的内存空间不一致，也就是构造函数中的方法要在每个实例上重新创建一次。这显然是不划算的。

优点：解决了类似对象创建问题，且可以检测对象类型。

缺点：构造函数方法要在每个实例上新建一次。

解决办法：原型模式。

原型模式

终于讲到了原型模式，JS 中每个构造函数都有一个
prototype
属性，这个属性是一个
指针
，指向
原型对象
，而这个原型对象包含了这个构造函数所有实例共享的属性和方法。而
实例对象
中有一个
proto
属性，它指向
原型对象
，也就是
构造函数.prototype == 原型对象 == 对象._proto_
，那么对象就可以获取到原型对象中的属性和方法啦。同时，所有对象中都有一个
constructor
属性，原型对象的constructor指向其对应的构造函数。

使用原型，就意味着我们可以把希望实例共享的属性和方法放到原型对象中去，而不是放在构造函数中，这样每一次通过构造函数new一个实例，原型对象中定义的方法都不会重新创建一次。来看下面的例子：

function Person() {
}

Person.prototype.name = "leon";
Person.prototype.age = "20";
Person.prototype.greeting = function() {
  alert('Hi!');
};

var person1 = new Person();
var person2 = new Person();
alert(person1.name); //"leon"
alert(person2.name); //"leon"
alert(person1.greeting == person2.greeting); //true

优点：与单纯使用构造函数不一样，原型对象中的方法不会在实例中重新创建一次，节约内存。

缺点：使用空构造函数，实例 person1 和 person2 的 name都一样了，我们显然不希望所有实例属性方法都一样，它们还是要有自己独有的属性方法。并且如果原型中对象中有引用类型值，实例中获得的都是该值的引用，意味着一个实例修改了这个值，其他实例中的值都会相应改变。

解决办法：构造函数+原型模式组合使用。

另外 JS 中还定义了一些与原型相关的属性，这里罗列一下：

Object.getPrototypeOf()，取得实例的原型对象:
  Object.getPrototypeOf(person1);
isPrototypeOf()，判断是不是一个实例的原型对象:
  Person.prototype.isPrototypeOf(person1);
hasOwnProperty()，检测一个属性是否存在于实例中:
  person1.hasOwnProperty("name");

in，判断一个属性是否存在于实例和原型中。
"name" in person1;

构造函数+原型模式

最后一种方式就是组合使用构造函数和原型模式，构造函数用于定义实例属性，而共享属性和方法定义在原型对象中。这样每个实例都有自己独有的属性，同时又有对共享方法的引用，节省内存。

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

Person.prototype = {
  constructor: Person,
  nationality: "China",
  greeting: function() {
    alert(this.name);
  }
}

var person1 = new Person("leon", "20");
var person2 = new Person("jack", "21");
alert(person1.greeting == person2.greeting) //true

上面代码中用对象字面量的形式重写了原型对象，这样相当于创建了一个新的对象，那么它的
constructor
属性就会指向Object，这里为了让它继续指向构造函数，显示的写上了
constructor: Person

这种构造函数与原型模式混成的模式，是目前在 JS 中使用最为广泛的一种创建对象的方法。

对象字面量 --> 工厂模式 --> 构造函数 --> 原型模式 --> 构造函数+原型模式

原型对象和构造函数的区别？

Object
是
构造函数
，而
Object.prototype
是
构造函数的原型对象
。构造函数自身的属性和方法无法被共享，而原型对象的属性和方法可以被所有实例对象所共享。
什么是类？

定义
对象的特征
。它是对象的属性和方法的模板定义.而每一个新的对象，都是类的一个实例。
继承怎么用呢？

在Javascript中，继承通过赋予子类一个父类的实例并专门化子类来实现。在现代浏览器中可以使用
Object.create
实现继承.

原型 + 原型链

原型

：每一个函数都有个prototype，这个属性指向该函数的原型对象，每个对象都有一个proto属性，这个属性指向该对象的原型

原型链

：实例对象与原型的链接，就是原型链

原型是函数特有

常规的对象数组没有原型（挂载会报错，可知没有）

展开的 [[Prototype]] 等同于

proto

他是原型链，里面的 prototype 属性才是原型

查找规则

null => object,array => {} ,[]

就近原则(先从自身实例查找) 向上查找（顺着原型链一层一层查找）直到为null为止

查找过程

中，找到了立即返回或调用就停止查找

找到null 都没有就报错函数没有会报错属性没有出现 undefined

未申明报错 not defaned

this指向

1、this永远指向一个对象

2、this对象，通过不同的方式调用函数，this的指向就不同

核心一句话 – 哪个对象调用函数，函数里面的this指向哪个对象。

1.如果是一般函数,this指向全局对象window;

2.在严格模式下”use strict”,为undefined.

3.对象的方法里调用,this指向调用该方法的对象.

4.构造函数里的this,指向创建出来的实例.

改变this的指向

var obj = {
	name: '小明',
	getName(age){
		console.log(this.name+'年龄：'+age)
	}
}

var tina = {
	name: '小红'
}

// 可用 局部变量来代替this指针
1.定时器，延时器中 ：this指向window
2.普通的函数中：this指向window
3.构造函数中：this指向实例化的对象
4.箭头函数中：指向宿主对象
可以这样理解：箭头函数没有自己的this，需要去它的上一层找，它内部的this指向就是外部代码块的this指向
5.DOM0级事件的回调函数中指向window 
6.DOM2级事件指向对应的节点对象

注： DOM0 和DOM1级事件可以简单理解为：
1.DOM0级事件就是直接通过onclick绑定到html元素的事件
同元素的同一事件只能绑定一个函数，否则后面的事件会覆盖前面的事件
2.DOM2级事件是通过addEventListener绑定的事件
可以绑定多个函数，按顺序执行
3.DOM1一般只有设计规范没有具体实现，所以一般跳过。

call() – – 第一个参数是要改变后的需要指向的对象，第二个之后，是单个参数列表

// call(thisScope, arg1, arg2, arg3...)
obj.getName.call(tina,18)

apply() – – 第一个参数是要改变后的需要指向的对象，第二个参数是一个数组。数组里的顺序，严格按照函数的参数的顺序定义

// apply(thisScope, [arg1, arg2, arg3...])
obj.getName.apply(tina,[18])

bind() – – 第一个参数是要改变后的需要指向的对象。bind返回的是一个改变的this的指向后的函数体，所以可以在bind第二参数后面继续函数需要的参数，在调用；或者在调用时在传需要传递的参数

var o = obj.getName.bind(tina,18)
o()
// 或
var o = obj.getName.bind(tina)
o(18)

原文链接：https://blog.csdn.net/qq_33957176/article/details/104677802