JS原型与原型链

JS的复杂类型都是Object类型,而JS不是一门完全面向对象编程的语言(基于对象的解释性编程语言)。

因为JS中没有类(Class)这个概念,所以JS的设计者使用了构造函数来实现继承机制。

即便是在 ES2015/ES6 中引入了 class 关键字,但那也只是语法糖,JavaScript 仍然是基于原型的。

构造函数:

function Animal(name,age){
    this.name = dog
    this.age = 10
}

const dog = new Animal('dog',10)

通过this赋值的属性或者方法,是每个实例的实例属性以及实例方法,无法共享公共属性。所以又设计出了一个原型对象,来存储这个构造函数公共属性以及方法

创建一个新对象——将构造函数的作用域赋值给新对象——执行构造函数中的代码——返回新对象

JS的每个函数在创建的时候,都会生成一个属性prototype,这个属性指向一个对象,这个对象就是此函数的原型对象。该原型对象中有个属性为constructor,指向该函数。

这样原型对象它的函数之间就产生了联系。

//构造方法
function Animal(name,age){
    this.name = name
    this,age = age
}

//所有实例共享的方法  通过prototype属性访问到原型对象
Animal.prototype.say = function(){
     console.log("wnagwwang!)   
}

const dog = new Animal('dog',10)
dig.hasOwnProperty('say') //false 说明say方法不是定义到自己本身上的

原型链:

每个通过构造函数创建出来的实例对象,其本身有个属性__proto__,这个属性会指向该实例对象构造函数原型对象。 

 __proto__ 并不是语言本身的特性,这是各大厂商具体实现时添加的私有属性,虽然目前很多现代浏览器的 JS 引擎中都提供了这个私有属性,但依旧不建议在生产中使用该属性,避免对环境产生依赖。

我们可以使用 Object.getPrototypeOf 方法来获取实例对象的原型,然后再来为原型添加属性。

当访问一个对象的某个属性时,会先在这个对象本身属性上查找,如果没有找到,则会通过它的__proto__隐式属性,找到它的构造函数原型对象,如果还没有找到就会再在其构造函数prototype__proto__中查找,这样一层一层向上查找就会形成一个链式结构,称为原型链

构造函数实例化的对象 _proto_ ——>构造函数的原型对象_proto ——>function Object的原型对象

function Object的原型对象的_proto_ 指向——>null(原型链的尽头)

内存结构

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以为您提供一些 JS 高级原型原型链的练习题,希望对您有所帮助。 1. 创建一个构造函数 Person,它有属性 name 和 age。创建一个对象 john,它的 name 是 "John",age 是 30。使用 Person 的原型对象添加一个方法 sayHello,它会在控制台输出 "Hello, my name is {name}!"。 ```javascript function Person(name, age) { this.name = name; this.age = age; } Person.prototype.sayHello = function() { console.log(`Hello, my name is ${this.name}!`); }; const john = new Person("John", 30); john.sayHello(); ``` 2. 创建一个构造函数 Animal,它有属性 name 和 type。创建一个对象 cat,它的 name 是 "Whiskers",type 是 "Cat"。使用 Object.create() 方法创建一个对象 dog,它的 name 是 "Fido",type 是 "Dog"。使用 Animal 的原型对象添加一个方法 sayType,它会在控制台输出 "{name} is a {type}."。 ```javascript function Animal(name, type) { this.name = name; this.type = type; } Animal.prototype.sayType = function() { console.log(`${this.name} is a ${this.type}.`); }; const cat = new Animal("Whiskers", "Cat"); const dog = Object.create(Animal.prototype, { name: { value: "Fido", writable: true, enumerable: true, configurable: true }, type: { value: "Dog", writable: true, enumerable: true, configurable: true } }); cat.sayType(); // Whiskers is a Cat. dog.sayType(); // Fido is a Dog. ``` 3. 创建一个构造函数 Shape,它有属性 color 和 name。创建一个对象 circle,它的 color 是 "red",name 是 "Circle"。创建一个对象 square,它的 color 是 "green",name 是 "Square"。使用 Shape 的原型对象添加一个方法 describe,它会在控制台输出 "This is a {color} {name}."。 ```javascript function Shape(color, name) { this.color = color; this.name = name; } Shape.prototype.describe = function() { console.log(`This is a ${this.color} ${this.name}.`); }; const circle = new Shape("red", "Circle"); const square = new Shape("green", "Square"); circle.describe(); // This is a red Circle. square.describe(); // This is a green Square. ``` 希望这些练习题能够帮助您巩固 JS 高级原型原型链的知识。如果您有任何问题或需要进一步的帮助,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值