专业网站建设在哪里,大连高新园区教育局,自己做网站买,wordpress 加盟主题JavaScript——原型对象专题 文章目录JavaScript——原型对象专题1. 原型对象2. 原型对象的this指向3. 案例4. constructor属性5. 对象原型6. 总结7. 原型继承8. 原型链由先前的学习可知#xff0c;构造函数实例创建的对象彼此独立、互不影响#xff0c;很好的体现了面向对象…JavaScript——原型对象专题 文章目录JavaScript——原型对象专题1. 原型对象2. 原型对象的this指向3. 案例4. constructor属性5. 对象原型6. 总结7. 原型继承8. 原型链由先前的学习可知构造函数实例创建的对象彼此独立、互不影响很好的体现了面向对象的封装特性。但是构造函数存在内存浪费的问题如下代码function Star(uname, age) {this.uname unamethis.age agethis.sing function(){console.log(我会唱歌)}
}
const ldh new Star(刘德华, 18)
const zxy new Star(张学友, 19)
console.log(ldh.sing zxy.sing) // false以上代码定义了Star构造函数并新建了两个Star实例对象其中实例对象中的uname和age作为简单数据类型会以具体的值的形式直接存放在内存的栈中而sing方法它作为复杂数据类型会以地址的形式存放在内存的栈而地址所指向的复杂数据类型会以具体的方法存放在内存的堆中。一个实例对象会有一个sing方法因此会占用一个栈空间和一个堆空间这样就造成了内存的浪费。而原型对象就是解决内存浪费的一种方法。
1. 原型对象
原型对象能够实现方法共享并解决构造函数内存浪费的问题。下面我们通过代码来简单理解一下什么是原型对象。
// 1. 公共的属性写到 构造函数 里面
function Star(uname, age) {this.uname unamethis.age age
}
// 2. 公共的方法写到 原型对象 身上
Star.prototype.sing function(){console.log(我会唱歌)
}
const ldh new Star(刘德华, 18)
const zxy new Star(张学友, 19)
ldh.sing() // 调用
console.log(ldh.sing zxy.sing) // true通过运行代码并分析输出结果我们可以总结如下
构造函数通过原型分配的函数是所有对象所共享的。JavaScript规定每一个构造函数都有一个prototype属性指向另一个对象所以我们也称为原型对象。这个对象可以挂载函数对象实例化不会多次创建原型上的函数节约内存。我们可以把那些不变的方法直接定义在prototype对象上这样所有的对象的实例就可以共享这些方法。构造函数和原型对象中的this都指向实例化的对象。
2. 原型对象的this指向
知道什么是原型对象后值得我们关注的问题是构造函数和原型对象中this的指向分别是什么。下面我们通过代码来一一解析。
function Star(uname, age) {console.log(构造函数的this指向,this)this.uname unamethis.age age
}
Star.prototype.sing function(){console.log(原型对象的this指向,this)console.log(我会唱歌)
}
const ldh new Star(刘德华, 18) // 构造函数的this指向ldh
ldh.sing() // 原型对象的this指向ldh因此我们可以得出结论构造函数和原型对象中this都指向实例化的对象。
3. 案例
下面我们通过一个案例更加深刻的理解原型对象。
实现需求给数组扩展求最大值方法和求和方法。
数组扩展求最大值方法
Array.prototype.max function () {return Math.max(...this) // 巧妙的方法 值得注意// 原型函数里面的this指向 实例对象 arr
}
const arr [1, 2, 3] // 等同于 new Array(1, 2, 3)
console.log(arr.max()) // 3数组扩展求求和方法
Array.prototype.sum function () {let total 0// 原型函数里面的this指向 实例对象 arr// this.forEach(item // 简单方法// total item)// return total// 巧妙的方法return this.reduce((prev, item) prev item, 0)
}
const arr [1, 2, 3] // 等同于 new Array(1, 2, 3)
console.log(arr.sum()) // 64. constructor属性
constructor属性在哪里
每个原型对象里面都有个constructor属性constructor构造函数
作用该属性指向该原型对象的构造函数简单理解就是指向我的爸爸我是爸爸的孩子 constructor属性的使用场景
如果有多个对象的方法我们可以给原型对象采取对象形式赋值。但是这样就会覆盖构造函数原型对象的原本内容这样修改后的原型对象constructor就不再指向当前构造函数了此时我们可以在修改后的原型对象中添加一个constructor指向原来的构造函数。
下面我们通过代码来理解使用场景
给构造函数添加多个方法不使用constructor指向构造函数。
function Star(uname, age) {this.uname unamethis.age age
}
console.log(Star.prototype);
Star.prototype {sing: function () {console.log(唱歌);},dance: function () {console.log(跳舞);}
}
console.log(Star.prototype);可以看到constructor属性丢失。 下面我们再手动利用 constructor 指回构造函数。
function Star(uname, age) {this.uname unamethis.age age}console.log(Star.prototype);Star.prototype {// 手动利用 constructor 指回 Star构造函数constructor: Star,sing: function () {console.log(唱歌);},dance: function () {console.log(跳舞);}}console.log(Star.prototype);可以看到constructor指回构造函数。 因此constructor主要用来指回原来的构造函数。
5. 对象原型
对象都会有一个属性__proto__指向构造函数的prototype原型对象之所以我们对象可以使用构造函数prototype原型对象的属性和方法就是因为对象有__proto__原型的存在。 注意
__proto__是JS非标准属性。[[prototype]]和__proto__意义相同。用来表明当前实例对象指向哪个原型对象prototype__proto__对象原型里面也有一个constructor属性指向创建该实例对象的构造函数。
6. 总结 prototype是什么哪里来的 prototype是原型(原型对象)构造函数都自动有原型。 constructor属性在哪里作用是干啥的 prototype原型和对象原型__proto__里面都有constructor属性constructor属性都指向创建实例对象/原型的构造函数。 __proto__属性在哪里指向谁 __proto__属性在实例对象里面指向原型prototype。 7. 原型继承
继承是面向对象编程的另一个特征通过继承进一步提升代码封装的程度JavaScript中大多是借助原型对象实现继承的特性。
龙生龙、凤生凤、老鼠的儿子会打洞描述的正是继承的含义。
// 公共部分放被继承的构造函数上
function Person() {this.eyes 2this.head 1
}
// 女人 构造函数 继承Person
function Women() {
}
console.log(未继承前原型对象, Women.prototype);
// Women通过原型来继承Person
Women.prototype new Person()
// 指回原来的构造函数
Women.prototype.constructor Women
const red new Women()
console.log(继承后的实例对象, red);
console.log(继承后的原型对象, Women.prototype);8. 原型链
基于原型对象的继承使得不同构造函数的原型对象关联在一起并且这种关联的关系是一种链状的结构我们将原型对象的链状结构关系称为原型链。 原型链-查找规则
当访问一个对象的属性包括方法时首先查找这个对象自身有没有该属性。如果没有就查找它的原型也就是__proto__指向的prototype原型对象。如果还没有就查找原型对象的原型Object的原型对象。依此类推一直找到Object为止null。__proto__对象原型的意义就在于为对象成员查找机制提供一个方向或者说一条路线。可以使用instanceof运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链中。
function Person() {
}
const ldh new Person()
console.log(ldh instanceof Person) // true
console.log(ldh instanceof Object) // true
console.log(ldh instanceof Array) // false
console.log([1,2,3] instanceof Array) // true
