弄懂js中的原型对象

我会带着你远行 2022-03-25 07:44 178阅读 0赞

### 首先有哪些知识点? ###

\_\_proto\_\_     对象的原型对象

prototype      返回函数的原型对象

constructor   返回创建此对象的数组函数的引用

instanceof     判断是不是函数的实例

getPrototypeOf()    返回对象的原型对象

setPrototypeOf()   设置对象的原型对象

Object.create()    创建一个新对象,传入的参数作为新创建对象的原型对象;

### 论证 ###

例子一:

var obj = {};
    var fn = function () {};
    console.log(obj.prototype);
    console.log(fn.prototype);

![20190119144134362.png][]

总结:只有函数才有能使用prototype

例子二:

function Fn () {};
    var fn1 = new Fn();
    console.log(fn1.__proto__ === Fn.prototype);//true
    console.log(Fn.prototype.constructor === Fn);//true

总结:构造函数的实例(fn1)的原型指向构造函数的原型对象(Fn.prototype)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMDgxODQx_size_16_color_FFFFFF_t_70][]

例子三:

内置对象

console.log(String.__proto__===Function.prototype);//true
    console.log(Number.__proto__===Function.prototype);//true
    console.log(Array.__proto__===Function.prototype);//true
    console.log(Object.__proto__===Function.prototype);//true
    console.log(Function.__proto__===Function.prototype);//true
    console.log(String.__proto__.__proto__===Object.prototype);//true
    console.log(Number.__proto__.__proto__===Object.prototype);//true
    console.log(Array.__proto__.__proto__===Object.prototype);//true
    console.log(Object.__proto__.__proto__===Object.prototype);//true
    console.log(Function.__proto__.__proto__===Object.prototype);//true
    console.log(Object.prototype.__proto__===Object.prototype)//false
    console.log(Object.prototype.__proto__)//null

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMDgxODQx_size_16_color_FFFFFF_t_70 1][]

总结: 1.所有的内置函数都是由Function()实例化的,包括它自己,即Function=new Function();

2.万物皆对象,所有的内置函数都是对象,所有的对象的原型链终点都是Object.prototype;

例子四:

改变原型对象

总结: 1.改变对象的原型对象可以使用Object.setPrototypeOf。不推荐使用\_\_proto\_\_

2.改变函数的原型对象使用prototype

[20190119144134362.png]: /images/20220325/e1c3cae9ff9f4dd89f5a7cb7c634ae1b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMDgxODQx_size_16_color_FFFFFF_t_70]: /images/20220325/b0e12fb0d92b40338eddae021e5be3a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMDgxODQx_size_16_color_FFFFFF_t_70 1]: /images/20220325/a0e105d8e95140c083dcad52ae24bb07.png