JavaScript原型

JavaScript原型,第1张

JS原型 1. 什么是原型 ?2. 构造函数、原型对象和实例对象的关系3. 原型层级3.1) 对象访问属性3.2) 对象写入属性3.3) hasOwnProperty() 和 in


1. 什么是原型 ?

在 JS 高级程序设计这本书中有这么一段话:

每个函数都会创建一个 prototype 属性,这个属性是一个对象,包含应该由特定引用类型的实例共享的属性和方法
实际上,这个对象就是通过调用构造函数创建的对象的原型

它告诉了我们:

原型:它是一个对象,它的名字叫做 prototype所有的 JS 对象都会从一个属性 ----- prototype(原型对象)中继承属性和方法
(在它上面定义的属性和方法可以被对象实例共享)

通过一个例子看看:

function Person() {
    
}
Person.prototype.name = "Xixi";
console.log(Person.prototype);


这段代码中,Person() 作为的是一个构造函数,我们在它的原型对象 prototype 上定义了一个属性 name,通过输出它,我们可以清晰的看见它是一个对象


2. 构造函数、原型对象和实例对象的关系

默认情况下,所有原型对象自动获得一个名为 constructor 的属性,指回与之关联的构造函数

每次调用构造函数创建一个新实例,这个实例的内部 [[Prototype]] 指针就会被赋值为构造函数的原型对象

通过一段例子理解一下:

function Person() {
    
}
Person.prototype.name = "Xixi";
let Peo = new Person();
console.log(Person.prototype);
// __proto__ 这个属性暴露访问对象的原型,相当于里面的 [[Prototype]]
console.log("Person 构造函数的原型对象", Person.prototype);
console.log("Peo 实例对象的[[Prototype]]", Peo.__proto__, Person.prototype === Peo.__proto__);

通过这个,我们可以看出,Person() 构造函数的原型对象的 constructor 属性指向与之关联的构造函数 Person()

构造函数,原型对象和实例对象的关系可以如下图所示:


3. 原型层级 3.1) 对象访问属性

在通过对象访问属性时,会按照这个属性的名称开始搜索,它会通过以下步骤:

先在对象实例上进行查找如果未找到,则搜索会沿着指针进入原型对象,然后在原型对象上查找 3.2) 对象写入属性

如果我们在实例对象上添加了一个与原型对象中同名的属性,那就会在实例上创建这个属性,这个属性会遮住原型对象上的属性,并不会重写原型对象上的属性

只要给对象实例添加一个属性,这个属性就会遮蔽原型对象上的同名属性,也就是虽然不会修改它,但会屏蔽对它的访问

举个例子:

function Person() {
    
}
Person.prototype.name = "Xixi";
let Peo = new Person();
Peo.name = "Haha";
console.log(Peo);


我们可以看到实例对象上出现了 name 属性,它的值为 Haha,而它的原型对象上的属性 name 的值仍然为 Xixi,只不过我们此时已经屏蔽了对他的访问

3.3) hasOwnProperty() 和 in

对于一个属性是来自于原型对象上的还是实例对象上的,我们可以通过 hasOwnProperty() 这个函数方法进行查看

hasOwnProperty():会在属性存在于调用它的对象实例上时返回 true

举个例子看看:

function Person(name, job) {
    this.name = name;
    this.job = job;
}
Person.prototype.name = "Xixi";
Person.prototype.age = 18;
let Peo = new Person("Haha", "student");
console.log(Peo.hasOwnProperty('name'));   // true
console.log(Peo.hasOwnProperty('age'));    // false
console.log(Peo.hasOwnProperty('job'));    // true

第一个和第三个输出为 true,是因为在实例对象上有 nameage 属性;
第二个输出为 false ,虽然原型对象上有 age 属性,但是实例对象上并没有 age 属性


in *** 作符
在单独使用时,in *** 作符会在可以通过对象访问指定属性时返回 true,无论该属性是在实例上还是在原型上
通过这个特性,我们可以结合 hasOwnProperty() 一起使用,来判断某个属性是否在原型上
(只要 in *** 作符返回 truehasOwnProperty() 返回 false,就说明该属性是一个原型属性)

举个例子:

function Person(name, job) {
    this.name = name;
    this.job = job;
}
Person.prototype.name = "Xixi";
Person.prototype.age = 18;
let Peo = new Person("Haha", "student");
console.log(!Peo.hasOwnProperty('name') && 'name' in Peo);    // false
console.log(!Peo.hasOwnProperty('age') && 'age' in Peo);      // true
console.log(!Peo.hasOwnProperty('job') && 'job' in Peo);      // false

第一个输出:因为 name 属性在实例对象属性上有,所以 !hasOwnProperty() 会返回 false,最终返回 false
第二个输出:因为 age 属性在实例对象属性上没有,所以 !hasOwnProperty() 会返回 true,由因为原型对象上有 age 属性,所以 in *** 作符也会返回 true,最终返回 true
第三个输出:因为 job 属性在实例对象属性上有,所以 !hasOwnProperty() 会返回 false,最终返回 false

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/940633.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-17
下一篇 2022-05-17

发表评论

登录后才能评论

评论列表(0条)

保存