JavaScript原型对象和原型链

2021-06-19 22:59:23 阅读：129 来源： 互联网

标签：__ proto 对象 JavaScript 原型 Fn 构造函数

一、什么是原型对象

原型对象：函数中的一个属性，prototype，这个属性就是用来指向原型对象的，我们把这个对象称为原型对象

    function Fn() {}
    console.log(Fn.prototype);

通过控制台可以看见Fn的原型对象上有一个属性 constructor(构造器) 而它的作用就是指回构造函数本身

有了原型对象(prototype)，我们就可以在原型上定义方法，问题点来了为什么不在构造函数中直接定义方法呢？

我们通过构造函数创建对象的时候开辟了一个新的空间，如果构造函数内部中又有一个方法又会在内存中开辟了一个空间，缺点：浪费内存

而我们通过给原型对象(prototype)上添加方法，通过创建实例对象都可以访问得到作用：共享方法节省内存

如何给原型上添加方法呢？

和给普通对象添加方法没什么区别，平常怎么添加，只不过在对象前加一个prototype属性就可以了，我们通常把属性放在构造函数里，把方法放在原型对象身上

    function Fn(name, age) {
      this.name = name
      this.age = age
    }
    Fn.prototype.eat = function () {
      console.log(eat);
    }

接下来我们去验证它到底创建的实例对象有没有这个eat方法呢

    let obj = new Fn('奥特曼', 20)
    console.log(obj);

从上面啊发现了__proto__ (指针)中可以得到eat方法所以啊定义是在原型上定义的而实例对象又通过__proto__拿到了eat()方法所以 Fn.prototype===obj.__proto__

注意点：我们是通过.的方式进行添加方法,如果通过对象赋值去往原型上添加方法需要指回原来的构造函数原因就是原来的constructor被替换掉了

    Fn.prototype = {
      eat: () => {
        console.log('爱吃宫保鸡丁');
      }
    }
    Fn.prototype.constructor = Fn  //原型对象指回原来的构造函数

构造函数、实例对象、原型对象三者关系

回过头来看 __proto__(隐式原型 ) 每个对象中都有一个属性叫__proto__ 他是用来指向原型对象的，（并且他是非标准属性，所以说我们不能操作它，只能提供一个指向）

当查找成员(属性和方法) 的时候它会优先从自身去查找，如果自身没有他回去__proto__的指向继续查找，我们知道了实例化对象的__proto__指向了原型对象，那么原型对象的__proto__指向谁呢？并且再__proto__呢？

    console.log(obj.__proto__.__proto__.constructor);//constructor指向构造函数本身
    console.log(obj.__proto__.__proto__.__proto__);

最后发现Object的__proto__为null 所以说原型对象到了Object就已经到顶了接下来把他们串起来就形成了原型链

原型链

成员查找机制

   function Fn() {}
    Fn.prototype.name = '怪兽'
    let obj = new Fn()
    obj.name = "奥特曼"
    console.log(obj.name);

分别在原型对象上挂和obj一个属性同样的name属性如果自身有则输出自身，

如果自身没有则输出原型上的属性(查找离自己最近一级的)

如果原型和自身上都没有输出undefined

this指向

    Fn.prototype.eat = function () {
      console.log(this);
    }
    console.log(obj);
    obj.eat()

构造函数中的this和原型对象上的this 都指向的是实例对象

总结通过上面的一些例子来看，如果实例对象本身没有的属性则会去离自己最近的原型对象去找如果还没有则会去原型对象上的原型对象去找，直到找不到该属性，形成一种链状的结构，从而也达到了继承的作用

标签：__,proto,对象,JavaScript,原型,Fn,构造函数
来源： https://blog.csdn.net/m0_46846526/article/details/118003419

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JavaScript原型对象和原型链

一、什么是原型对象

如何给原型上添加方法呢？

构造函数、实例对象、原型对象 三者关系

原型链

构造函数、实例对象、原型对象三者关系