JavaScript自有属性与原型属性

自有属性与原有属性

下面是对JavaScript面向对象中自有属性与原型属性的整理，希望可以帮助到有需要的小伙伴。

1、自有属性与原型属性

自有属性：构造函数本身的属性。 通过对象的引用添加的属性。其他对象可能无此属性；即使有，也是彼此独立的属性
原型属性：通过原型所定义的属性。用于共享属性和方法。从原型对象中继承来的属性，一旦原型对象中属性值改变，所有继承自该原型的对象属性均改变。

// 定义构造函数
function Hero(name){// 构造函数本身的属性 -- 自有属性this.name = name;this.sayMe = function () {console.log('this is function');}
}// 通过构造函数的Hero的prototype新增属性或方法
// 通过原型所定义的属性 -- 原型属性
Hero.prototype.age = 18;/*通过构造函数Hero创建对象时* 不仅具有构造函数的自有属性* 还具有构造函数的原型属性
*/var hero = new Hero('张无忌');
console.log(hero.name);  // 张无忌
console.log(hero.age);   // 18var hero2 = new Hero('周芷若');
console.log(hero2.name);  // 周芷若
console.log(hero2.age);   // 18// name属性的值能动态改变
// age属性的值不能动态改变/*
// 为对象hero改变自有属性的值  改变哪个对象的属性值，哪个对象的属性值就改变，不会影响到其他对象的该属性的值
hero.age = 80;
console.log(hero.age);  // 80
console.log(hero);      // Hero { name: '张无忌', sayMe: [Function], age: 80 }
console.log(hero2.age); // 18
// hero的age属性值改了  hero2的age属性值没改
*/// 通过原型改变原型属性的值，该构造函数的所有对象的该属性的值都会改变
Hero.prototype.age = 80;
console.log(hero.age);  // 80
console.log(hero2.age); // 80

2、重写属性

原有属性比原型属性的优先级高。

原型属性不能重写原有属性的值

// 定义构造函数
function Hero() {this.name = '张无忌';
}// 通过原型重写构造函数中的属性
Hero.prototype.name = '周芷若';// 创建对象
var hero = new Hero();
// 自有属性与原有属性同名时，默认访问的是自有属性 -> 自有属性的优先级别该与原型属性
console.log(hero.name);  // 张无忌 输出的是原有的属性值// 通过以下测试 自有属性比原型属性优先级高，而不是将原型属性覆盖掉了
// 删除对象的属性
delete hero.name;
// 重新访问对象的属性
console.log(hero.name);  // 周芷若

3、检测自有或原型属性

使用hasOwnPropertype()方法检测对象是否具有指定的自有属性:

object.hasOwnProperty (prop)方法* 作用 - 判断当前指定属性是否为自有属性* 参数* prop -表示指定属性名称*返回值-布尔值* true -表示存在指定的自有属性* false -表示不存在指定的自有属性

使用in关键字检测对象及其原型链中是否具有指定属性:

使用in关键字检测对象的属性* 作用-判断对象中是否存在指定属性(自有属性或原型属性)* 返回值-布尔值* true -表示存在指定的属性* false -表示不存在指定的属性

实例：

// 定义一个构造函数
function Hero() {this.name = '张无忌';  // 自有属性
}// 原型属性
Hero.prototype.age = 18;// 创建对象
var hero = new Hero();
/*object.hasOwnProperty (prop)方法* 作用 - 判断当前指定属性是否为自有属性* 参数* prop -表示指定属性名称*返回值-布尔值* true -表示存在指定的自有属性* false -表示不存在指定的自有属性*/
// 检测是否有name这个自有属性
console.log(hero.hasOwnProperty('name'));  // true/*使用in关键字检测对象的属性* 作用-判断对象中是否存在指定属性(自有属性或原型属性)* 返回值-布尔值* true -表示存在指定的属性* false -表示不存在指定的属性*/
console.log('age' in hero);  // true
console.log('name' in hero); // true

总结

JavaScript自有属性与原型属性相关推荐

（转载）js对象原来也有类、实例属性和原型属性
<html> <head> <meta http-equiv="Content-Type"content="text/htm ...
javascript 原型属性（prototype 属性）与实例属性（自身属性）
讲到原型属性,prototype属性,实例属性,自身属性,首先我们要明白这四者之间的关系.我查了一些资料,原型属性又叫prototype属性,实例属性又叫自身属性.只是叫法不同.下面我要引用他人写的一 ...
JS获取对象属性的各种方式和区别（自身/原型属性、可枚举/不可枚举）
对象的属性有自身属性和原型属性之分,自身属性是对象自己的属性,原型属性是存在于原型链上的属性. 可以用Object.prototype.hasOwnProperty()判断是自身属性还是原型属性.(i ...
JavaScript之面向对象与原型笔记整理--------创建对象之原型（2）
4.原型每个函数都有一个prototype属性,这个属性是一个对象,用途是包含可以由特定类型的所有实例共享的属性和方法. 逻辑上可以这么理解:prototype通过调用构造函数而创建的那个对象的原型 ...
JavaScript之继承（原型链）
JavaScript之继承(原型链) 我们知道继承是oo语言中不可缺少的一部分,对于JavaScript也是如此.一般的继承有两种方式:其一,接口继承,只继承方法的签名:其二,实现继承,继承实际的方法 ...
如何更好地理解Javascript对象的自有属性和原型继承属性
Javascript对象具有"自有属性"(own property),也有一些属性是从原型对象继承而来的.为了更好地理解对象自有属性和继承属性下面的示例深入解释了属性的访问和设置细 ...
javascript中的prototype原型、_proto_属性、原型链
prototype原型 JavaScript是面向对象的语言,那么继承自然是其重要特征之一.与标准面向对象语言不同,JavaScript继承主要通过prototype原型实现.每一个函数都具有prot ...
【Infragistics教程】在javascript类中添加静态成员属性
2019独角兽企业重金招聘Python工程师标准>>> [下载Infragistics Ultimate最新版本] 在一个javascript类中创建一个属性的需求,它需要被所有对象 ...
JavaScript中的属性:如何遍历属性
JavaScript中的属性:如何遍历属性在JavaScript中,遍历一个对象的属性往往没有在其他语言中遍历一个哈希(有些语言称为字典)的键那么简单.这主要有两个方面的原因:一个是,JavaScr ...

JavaScript自有属性与原型属性

自有属性与原有属性

1、自有属性与原型属性

2、重写属性

3、检测自有或原型属性

总结

JavaScript自有属性与原型属性相关推荐

最新文章

热门文章