JS面向对象之原型

原型是什么

JS 中函数是一个包含属性和方法的 Function 类型的对象，原型就是 Function 类型对象的一个属性。

prototype 是构造函数特有的一个属性，
在这个属性上面的属性和方法可以被通过构造函数创建出来的对象调用，
所以也就是可以用来实现继承，这样就方便每一个对象都可以继承这些公用的方法

获取原型

当获取到了原型之后，我们会得到一个对象，既然是对象我们就可以为其添加属性和方法，
而我们为原型设置的属性和方法可以被原型派生的对象调用。

有两种方式可以获取对象的原型：

• 构造函数的 prototype 属性
• Object 对象的 getPrototypeOf() 方法，其中传入一个引用类型的实参

为原型新增属性和方法

1. 通过原型属性和方法直接定义
2. 直接为原型定义一对象

如下代码所示:

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

var result = fn1.prototype;

// . 符号直接添加属性或方法
result.age = 18;
console.log(result.age);

// 通过defineProperty添加
Object.defineProperty(fn1.prototype, 'job',{
    value: '程序员',
    writable: true,
    enumerable: true
});

console.log(fn1.prototype)

结果：

18
fn1 { age: 18, job: '程序员' }

构造函数的原型

对于一个构造函数 Person，有如下定义：

function Person(name){
    this.name = name;
    this.say = function (){
        console.log('我是' + name)
    }
}

然后为构造函数添加原型属性：

Person.prototype.age = 18;

然后通过 Person 函数创建对象 p：

var p = new Person('小明');

然后打印 p 对象的 age 属性，我们发现结果为 18，
当我们直接打印 p 对象时，没有发现其中有 age 属性，
但是通过 Object.getOwnPropertyDescript() 方法获取 p 对象的 age 属性时，结果为 undefined。
如下代码：

console.log(p.age);

result = Object.getOwnPropertyDescriptor(p, 'age')
console.log(result)

这是因为在创建对象的时候，在对象这一块内存中并没有 age 属性，而对象中有一个指针指向了构造函数的原型上的 age 属性
如下图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vgTGrv3D-1603815722638)(./img/构造函数的原型.jpg)]

自有属性和原型属性

自有属性：通过对象添加，其他兄弟对象不可见

原型属性：从原型中继承来的属性，原型属性可以被其他兄弟对象共享

原型属性的优先级低于自有属性，当原型属性和自有属性同名时，优先调用自有属性。

如下代码：

function Person(name) {
    // 构造函数自带的属性为自有属性
    this.name = name;
    this.say = function () {
        console.log('我是' + this.name)
    }
}

// 为构造函数的原型添加属性叫做原型属性
Person.prototype.age = 18;

var p1 = new Person('小明');
var p2 = new Person('小红')

console.log(p1.age)
console.log(p2.age)

结果：

18
18

对于上面例子，当对 p1 对象中的 age 属性进行修改操作时，不会修改原型上的属性，而是为自身新增了自有属性 age
而 p2 对象仍然继承的是原型对象中的 age 属性。

检测自有属性或原型属性

Object.hasOwnProperty() 方法可以检测指定属性是否为某个对象的自有属性，需要注意当指定属性不存在时返回
false，当指定属性为原型属性时同样返回 false。

第二种方法是采用 in 运算符的形式，当指定属性为某个对象的属性时返回 true，需要注意当指定属性在原型和自有
都找不到时，才返回 false。

如下代码：

function Person(name) {
    this.name = name;
    say = function () {
        console.log('我是' + name)
    }
}
Person.prototype.age = 18;

var p = new Person('小明');

console.log(p.hasOwnProperty('age'))
console.log('age' in p)

结果：

false
true

更改原型对象

在自定义的构造方法中，原型为一个空对象，我们可以通过 . 符号的方式为空原型对象增加属性和方法。
同样也可以通过重新赋值为对象的方式对空对象进行覆盖。如下代码所示：

function Person() {}

Person.prototype = {
    name: '小明',
    age: 14
}

var p = new Person();
console.log(p.name)
console.log(p.age)

结果：

小明
14

通过点符号增加与重新赋值的方式的区别在于，前者为空原型对象增加属性和方法，并没有改变指针的指向；
后者将空原型对象用自定义的对象覆盖了，改变了指针的指向。

隐式原型

实际上对象也有原型，之前的代码中经常打印对象的prototype 属性，得到 undefined，对象的原型的属性为 __proto__
调用该属性会获得该对象的原型上的属性和方法

之所以成为隐式原型，是因为对象的原型不能用于实际开发，只可用于代码调试。

isPrototypeOf 函数

Object 的 isPrototypeOf(obj) 函数可以判断某个对象是否为指定对象的原型。

语法结构：

obj1.isPrototypeOf(obj2);

若 obj1 为 obj2 的原型，则返回 true，否则返回 false。

扩展内置对象

既然有了原型这个概念，我们就可以对 JS 的内置对象做一些骚操作，也就是可以扩展内置的功能。
如下代码：

Object.prototype.sayMe = function (){
    console.log('我是 sayMe 方法')
}

var obj = {}

obj.sayMe()

//对内置对象 Array 进行扩展
Array.prototype.inArray = function (num){
    for (var i=0, size = this.length; i<size; i++){
        if (num === this[i]){
            return true;
        }
    }
    return false
}

var arr = [1,2,3,4,5];

console.log(arr.inArray(3))

结果：

我是 sayMe 方法
true

还可以通过属性描述符对内置对象进行扩展：

Object.defineProperty(Object.prototype, 'sayMe',{
    value: function (){
        console.log('this is function')
    },
    writable: false,
    enumerable: false,
    configurable: false
});

//密封对象
Object.seal(Object.prototype)

Object.prototype.age = 18;

var obj = {}
obj.sayMe()

console.log(obj.age);

结果：

this is function
undefined

function’)
},
writable: false,
enumerable: false,
configurable: false
});

//密封对象
Object.seal(Object.prototype)

Object.prototype.age = 18;

var obj = {}
obj.sayMe()

console.log(obj.age);

结果：

```text
this is function
undefined