JS:js的原型对象考点(*****五颗星)
1.原型对象的概念
定义:每一个构造函数都有一个与之相关联的对象,该对象称之为原型对象。
功能:每个实例对象都能共享其原型对象上的属性和方法,减少内存分配。
目的:解析构造函数创建对象过程中发生的问题
问题1:每次创建的新的对象里面的方法都会开辟一个新的对象内存空间,不是同一个引用地址
从内存资源分配考虑,我们无需为每个对象创建并分配一份新的函数对象(完全相同),这种函数大家最好共享同一份
<script> // 目的:解析构造函数创建对象过程中发生的问题 function Person(name){ this.name=name this.eat=function(){ console.log(this.name+"爱打球") } } var p=new Person("张三") var p2=new Person("李四") p.eat()//张三爱打球 p2.eat()//李四爱打球 // 问题:p.eat和p2.eat是同一个引用地址?不是,每次都开辟了新的内存空间 // 引用数据类型比较引用地址 // 过程: var p=new Person("张三")//p.eat=新的函数 var p2=new Person("李四")//p2.eat=新的函数 // 每次创建一个对象都开辟了新的独立内存空间,有栈内存和对内存 console.log(p.eat==p2.eat)//false 不是同一个引用地址 </script>
问题1: 解决方法1:方法作为全局函数,可以把函数单独拿出来,定义全局,函数名做方法对象
解决方法共享的目的是达到了,但是又产生了新的问题,我们面向对象编程的目的是为了减少全局变量,而这种写法又增加了全局变量,与我们编程思想产生了冲突。完美的解决办法:需要在构造函数上想办法,在构造函数身上开辟一个区域,来存放我们的公共方法——原型对象
<script> // 解决方法1:将对象中的方法属性写成全局函数 function eat(){//全局函数 console.log(this.name+"爱打球") } function Person(name){ this.name=name this.eat=eat//每一次都赋值,全局函数wat的内存地址 } var p=new Person("张三") var p2=new Person("李四") console.log(p.eat===p2.eat)//true </script>
问题1:解决方式2:从构造函数身上想办法---原型对象
定义:每一个构造函数都有一个与之相关联的对象,该对象称之为原型对象。
功能:每个实例对象都能共享其原型对象上的属性和方法,减少内存分配。
1. 构造函数.prototype获取原型对象
2. 构造函数.prototype.成员名 = 成员值,在原型对象上添加成员的方法
原型对象: 每一个构造函数都有一个与生俱来的对象 ----- 原型对象
功能: 共享方法给 创建出来的新对象 使用
构造函数获取原型对象-------Person.prototype
给原型对象添加成员(方法),都是由原型对象共享的方法,是同一个引用地址
<script> function Person(name){ this.name=name } console.log(Person.prototype) </script>
<script> function Person(name){ this.name=name } // 给原型对象添加成员(方法) Person.prototype.eat=function(){ console.log(this.name+"爱打球") } var p=new Person("张三") var p2=new Person("李四") //都是由原型对象共享的方法,是同一个引用地址 console.log(p.eat===p2.eat)//true console.log(Person.prototype) </script>
2.原型对象的相关概念
对象的成员有属性和方法
1.构造函数---构造器(类)-----创建对象用
**构造函数**:Person,和new关键字一起创建对象
2.原型对象-----构造函数对象身上的属性prototype,构造函数与生俱来的对象
**原型对象**:Person.prototype,
3.实例化-------new的过程,构造函数创建实例对象的过程
**实例化:**由构造器创建实例对象的过程称之为实例化
4.实例对象-----构造函数创建出来的新对象p
**实例对象**:由构造器创建出来的对象称之为实例对象
5.对象的成员:属性+方法:
1.原型成员--------给构造函数的原型上添加的成员(属性或方法)
**原型成员:**原型对象上的属性和方法,eat(),使用该原型对象对应构造器创建出来的所有实例对象都能访问
2.实例成员------构造函数里面的属性或方法
**实例成员:**实例对象上的属性和方法,name,age,只能当前实例对象才能访问
3.静态成员---给构造函数身上添加的成员,实例不能使用静态成员,静态成员只能给构造函数使用
**静态成员:**直接添加在构造函数上的属性和方法,只能使用构造函数才能访问
<script> // 对象的成员有属性和方法 // 1. 构造函数----构造器(类)----创建对象用---------母亲 function Person(name, age) { // 5. 实例成员-----name age this.name = name; this.age = age; } // 2. 原型对象----构造函数与生俱来的对象(夫妻)-----父亲 // Person.prototype //函数对象身上的属性prototype console.dir(Person);//ƒ Person(name, age) // 6. 原型成员-----eat Person.prototype.eat = function () { console.log(this.name + "爱吃木桶饭"); } // 3. 实例对象: 构造函数创建出来的新对象p // 4. 实例化: new的过程 构造函数创建实例对象的过程 var p = new Person("张三", 20); // 7. 静态成员-------- 给构造函数身上添加的成员 Person.showInfo = "这是一个人类"; console.log(p.showInfo);//undefined 实例不能使用静态成员 console.log(p.prototype);//undefined 实例不能使用静态成员 console.log(Person.showInfo);//这是一个人类 *** 静态成员只能给构造函数使用 //
剩余60%内容,订阅专栏后可继续查看/也可单篇购买
前端面试的一些常问问题、问题的具体实现(可直接运行)以及底层原理