原型链结构

JavaScript主要是通过原型链来实现继承的。所以,通过这篇文章先大概了解一下原型链结构吧~

通过学习面向对象中的原型,我们可以知道以下概念:

  • 每个构造函数都有原型结构
  • 每个对象都会有构造函数
  • 每个构造函数的原型都是一个对象

所以,我们可以得出以下结论:

  • 这个原型对象也有构造函数
  • 这个原型的构造函数也会有原型对象

这样就会形成一个链式结构,称为 原型链 。

1.原型链结构的基本形式
function Person(name){
    this.name = name;
}
var p = new Person;

链结构:
p –> Person.prototype –> Object.prototype –> null

属性搜索原则:
当访问一个对象的成员时,会先在自身找有没有,如果找到直接使用;如果没有找到,则去当前对象的原型对象中查找,如果找到直接使用;如果没有找到,继续找原型对象的原型对象,如果找到直接使用;如果没有找到,继续向上查找,直到Object.prototype,如果还是没有找到,则报错。

2. Object.prototype成员:

1)constructor:原型对象内的一个属性,指向该对象相关的构造函数

在使用新的对象替换掉默认的原型对象之后,原型对象中的constructor属性会变成object 。为了保证整个 “构造函数–原型–对象–” 之间关系的合理性,应进行如下操作:
在替换原型对象的时候,在新的原型对象中手动添加constructor 属性。

function Person(){
}
console.log(Person.prototype.constructor);//f Person(){}
Person.prototype = {
    constructor : Person
};
console.log(Person.prototype.constructor);//f Person(){}

2)hasOwnProperty:用来判断对象本身存在于实例中还是原型中,存在于实例时会返回true

function Person() {
}
Person.prototype.name = "aaa";
Person.prototype.age = 22;
var p1 = new Person(); 
var p2 = new Person();

console.log(p1.hasOwnProperty("name")); //false 此时p1的name属性来自原型

p1.name = "ccc";
console.log(p1.name); //ccc
console.log(p1.hasOwnProperty("name"));  //true 此时p1的name属性来自实例

console.log(p2.name); //aaa
console.log(p2.hasOwnProperty("name")); //false p2的name属性来自原型

delete p1.name;
console.log(p1.name); // aaa
console.log(p1.hasOwnProperty("name")); //false 此时p1的name属性来自原型

3)propertyEnumerable:用来检测属性是否属于某个对象的,如果检测到了,返回true,否则返回false.

  • 这个属性必须属于实例的,并且不属于原型.
  • 这个属性必须是可枚举的,也就是自定义的属性,可以通过for-in循环出来的.

只要符合上面两个要求,就会返回true。

function Person() {
    this.name = "我是实例的属性";
}
var p = new Person();
console.log(p.propertyIsEnumerable("name")); //true
Person.prototype.sayHello = function() {
    console.log("我是原型的属性");
}
console.log(p.propertyIsEnumerable("sayHello")); //false
for (var i in p) {
console.log(i); //name,sayHello
} 

在使用for-in循环时,返回的都是所有能够通过对象访问的、可枚举的属性,其中既包括存在于实例中的属性,也包括存在于原型中的属性。(JS高程)

4)toString和toLocaleString:将对象转换成字符串

var now = new Date();
console.log(now.toString());
//Fri May 25 2018 17:39:17 GMT+0800 (中国标准时间)
console.log(now.toLocaleString());
//2018/5/25 下午5:39:41

小结:
toString()方法获取的是String(传统字符串)
而toLocaleString()方法获取的是LocaleString(本地环境字符串)
一般推荐使用toString(),它不会因为本地环境的改变而发生变化。但如果是为了返回时间类型的数据,推荐使用LocaleString()。

5)valueOf:原型对象的一个方法,获取当前对象的值。

在对象参与运算的时候,默认的会先去调用对象的valueOf方法,如果valueOf获取到的是值无法计算,就去调用p的toString方法。最终做的就是字符串拼接的工作。

关于toString和valueOf,我觉得网上的文章只有这篇写的比较详细,所以我把地址粘过来啦,有兴趣的点进去看看吧~
Javascript中的valueOf与toString

6)._ _ proto _ _:是原型中的属性,指向当前对象的原型对象。

但是它是一个非标准的属性,为了保证通用性,不推荐使用。原则就是不允许通过对象给原型添加属性,一般用于调试。

3.关键字 instanceof

用来判断该构造函数的原型是否存在于该对象的原型上。
语法:

对象 instanceof 构造函数

因为 JavaScript中所有的对象 都会有 Object.prototype
所以所有的对象 instanceof Object 都是true

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: JavaScript原型链是一种继承机制,它使得每个对象都能从另一个对象继承属性。在 JavaScript 中,每个对象都有一个原型对象,并且可以从原型对象继承属性。 每个对象的原型对象都有一个自己的原型对象,以此类推。这就形成了一条原型链,从对象到原型对象再到其原型对象,直到最终到达 null。当你在对象上访问一个属性时,JavaScript 引擎会沿着原型链向上搜索,直到找到一个具有该属性的对象为止。 例如,假设我们有一个构造函数 `Person` 和一个实例 `person1`,它们看起来像这样: ``` function Person(name) { this.name = name; } Person.prototype.sayHi = function() { console.log(`Hi, my name is ${this.name}`); }; const person1 = new Person('Alice'); ``` 在这个例子中,`person1` 的原型对象是 `Person.prototype`,而 `Person.prototype` 的原型对象是 `Object.prototype`。所以,当我们在 `person1` 上调用 `sayHi` 方法时,JavaScript 引擎会在 `person1`、`Person.prototype` 和 `Object.prototype` 中依次搜索该方法,最终找到它并调用。 原型链使得我们能够实现继承,同时又不需要使用传统的继承语法 ### 回答2: JavaScript原型链是一种特殊的继承机制,它是基于对象的,与传统的基于类的继承不同。 在JavaScript中,每一个对象都有一个原型对象,而原型对象也是一个对象,并且它也有自己的原型对象,这样就形成了一条链式结构,被称为原型链。当我们访问一个对象的属性或方法时,如果对象本身没有这个属性或方法,它会沿着原型链向上查找,直到找到为止。 这个查找过程是通过对象的__proto__属性来实现的,__proto__属性指向该对象的原型对象。当我们访问对象的属性时,如果对象和它的原型对象中都没有这个属性,那么会继续查找原型对象的原型对象,直到找到属性或者到达原型链的顶端,即Object.prototype。如果还没有找到,那么返回undefined。 JavaScript原型链的实质是通过对象之间的关联关系来实现继承。当创建一个对象时,JavaScript引擎会自动为这个对象添加一个隐藏的属性__proto__,并将它指向该对象的构造函数的原型对象。这样,通过对象与原型对象之间的关系,实现了继承的特性。 原型链的应用主要体现在面向对象编程中的继承。通过定义构造函数和原型对象,我们可以实现对象的继承关系,并且可以方便地从原型对象中继承属性和方法,提高代码的复用性和可维护性。 总之,JavaScript原型链是一种通过对象关联来实现继承的机制,在面向对象编程中起到了重要的作用。它通过沿着原型链查找的方式,实现了属性和方法的继承,并提供了一种灵活、简洁的继承方式。 ### 回答3: JavaScript中的原型链是一种用于继承和属性查找的机制。每个JavaScript对象都有一个原型,它可以是另一个对象或null。 当我们访问一个对象的属性时,JavaScript引擎首先会在该对象自身查找该属性,如果找不到,它将继续在原型链上进行查找。原型链的顶层是Object.prototype,内置的JavaScript对象(如Array、String)都是它的子对象。 当我们创建一个对象时,JavaScript引擎会通过一个\_\_proto\_\_属性将该对象关联到它的构造函数的原型上。构造函数通过prototype属性来指定原型对象,在实例化对象时会自动创建一个存放共享方法和属性的原型对象。 通过原型链,对象可以继承自己的构造函数原型对象上的属性和方法。这意味着我们可以在原型对象上定义共享方法和属性,而不是每次创建新的对象时都重复定义这些方法和属性,从而节省内存空间。 当我们通过对象实例访问一个属性时,JavaScript引擎会首先在对象自身查找该属性,如果找不到,它会继续在原型链上查找,直到找到该属性或者到达原型链的顶层。如果该属性在原型链上的多个位置都有定义,那么只会取最先找到的属性值。 原型链JavaScript中实现继承的基础。通过让一个对象的原型指向另一个对象的实例,我们可以实现原型继承。子对象可以继承父对象原型链上的属性和方法。 总结来说,JavaScript原型链是一种用于实现继承和属性查找的机制。它通过将对象的原型与其构造函数的原型对象关联起来,从而实现属性继承和共享方法的定义。原型链JavaScript中面向对象编程的基础之一。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值