js奥义:原型与原型链(1)

简介: js奥义:原型与原型链(1)

要弄懂原型链,首先应先明白prototype原型对象、__proto__、对象三者之间的关系。

引入构造函数的相关定义:

  构造函数是一种比较特殊的函数,用于批量实例化对象。通俗一点说,构造函数是用于生成对象的模板

由于工厂模式在实例化对象时会存在同一功能代码在内存中开辟不同内存空间从而造成内存空间浪费的问题,更多的人选择使用构造函数来实例化对象,es6中引进的class关键字正是基于构造函数的思想

构造函数的本质上是将对象中一些公共的方法和属性 抽取出来,然后将这个函数封装成可复用的构造函数.

 构造函数的特点(与工厂函数相比较):    

    a. 函数名首字母大写;

    b.  函数体内没有关键字new,在实例化一个对象时会使用关键字new;

    c.  构造函数体内的this指代当前实例化对象;

    d.   函数体内没有关键字return。

 function Fn() {
            this.n = 20
        }
        Fn.prototype.say= function() {
            console.log(this.n)
        }
        var deb = new Fn()

 构造函数的new关键字在实例化对象时会做以下四件事:

  a.现在内存中开辟一块内存空间(new obj);

  b.让构造函数体内的this指向这个对象   (因而,this指代当前对象);

  c.将构造函数体内的属性和方法赋值给这个这个对象;

  d.返回这个对象 (因而,构造函数体内没有return关键字)

为了区别对待,以下将构造函数称为父类,将实例化对象称为子类。


一:原型


  1.定义

 每一个函数身上都有一个prototype(原型),由于这个prototype的值是一个对象类型,因而又叫做原型对象,ptototype属性是函数独有的属性!

  2.原型的作用

  原型对象的作用通常用来共享父类的方法,由于方法是函数,本质上也是一个对象,而对象的内存地址保存在堆空间里,如同工厂模式一般,多个内存空间存放相同的代码,会造成大量空间被占用,因而将公有的方法添加在父类的prototype上,也就是写入了同一对象上,调用的时候也就避免了多个空间存放同一代码的错误示范,而由于父类的属性的值是基本类型,所占内存较少,所以我们往往将其添加到父类函数体的内部。

  function Fn() {
            this.n = 20
        }
        Fn.prototype.sing = function() {
            console.log(this.n)
        }
        var deb = new Fn()
        var deb2 = new Fn()
        console.log(deb.sing === deb2.sing) //true

 

二:__proto__


  与函数的prototype属性不同,每一个obj的对象都有一个__ptoto__属性,这个__proto__属性隐式的指向了这个子类的的构造函数的prototype属性!但是这个__proto__属性是不可见的,这也就是为什么将其称作是隐式的,不过好在浏览器的支持下,它被定义为__proto__

  如果看到这里,希望你再好好思考一下 ”万物皆对象“这句话的含义

  从父类的角度看,子类的_proto_属性隐式指向了它的父类的prototype对象;从子类的角度看,子类自身的__proto__属性指向了它的父类的prototype属性

  假如我们对比父类的prototype与子类的__proto__属性:

console.log(Fn.prototype === deb.__proto__)//true

  理解了这一点,就可以明白为什么构造函数添加在其原型对象上的方法,实例化对象可以共享使用了:因为构造函数的prototype属性指向的实例化对象的__proto__属性指向是同一个对象,也就是父类的prototype对象


这样,就具备了深入理解原型链的条件。

相关文章
|
2月前
|
数据采集 JavaScript 前端开发
一站搞定原型链:深入理解JavaScript的继承机制
综上所述,可以得出: 1. 原型链是对象通过原型实现属性和方法继承的一种机制。 2. 每个对象都有一个 __proto__ 属性,指向它的原型对象。 3. 每个函数(包括构造函数)都有一个 prototype 属性,指向一个对象,这个对象的属性和方法可以被实例共享。 4. 构造函数创建对象时,新对象的 __proto__ 属性指向构造函数的 prototype 对象。 5. 继承可以通过设置原型对象实现,也可以使用 ES6 的 class 语法糖。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
7月前
|
JavaScript 前端开发 开发者
理解JavaScript中的原型链:基础与实践
【10月更文挑战第8天】理解JavaScript中的原型链:基础与实践
|
6月前
|
JavaScript 前端开发
JavaScript 原型链的实现原理是什么?
JavaScript 原型链的实现原理是通过构造函数的`prototype`属性、对象的`__proto__`属性以及属性查找机制等相互配合,构建了一个从对象到`Object.prototype`的链式结构,实现了对象之间的继承、属性共享和动态扩展等功能,为 JavaScript 的面向对象编程提供了强大的支持。
|
9月前
|
JavaScript 前端开发
如何在JavaScript中实现基于原型的继承机制
【8月更文挑战第14天】如何在JavaScript中实现基于原型的继承机制
55 0
|
6月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
83 1
JavaScript中的原型 保姆级文章一文搞懂
|
6月前
|
JavaScript 前端开发
原型链在 JavaScript 中的作用是什么?
原型链是 JavaScript 中实现面向对象编程的重要机制之一,它为代码的组织、复用、扩展和多态性提供了强大的支持,使得 JavaScript 能够以简洁而灵活的方式构建复杂的应用程序。深入理解和熟练运用原型链,对于提升 JavaScript 编程能力和开发高质量的应用具有重要意义。
|
6月前
|
JavaScript 前端开发
如何使用原型链继承实现 JavaScript 继承?
【10月更文挑战第22天】使用原型链继承可以实现JavaScript中的继承关系,但需要注意其共享性、查找效率以及参数传递等问题,根据具体的应用场景合理地选择和使用继承方式,以满足代码的复用性和可维护性要求。
|
7月前
|
JavaScript 前端开发 开发者
探索JavaScript原型链:深入理解与实战应用
【10月更文挑战第21天】探索JavaScript原型链:深入理解与实战应用
84 1
|
8月前
|
JSON JavaScript 前端开发
js原型继承|26
js原型继承|26
|
7月前
|
JavaScript 前端开发 开发者
深入理解JavaScript原型链:从基础到进阶
【10月更文挑战第13天】深入理解JavaScript原型链:从基础到进阶
128 0