争怎路由网/网站教程/内容

JavaScript中原型与原型链的代码讲解

网站教程2024-05-10 阅读
网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
本篇文章给大家带来的内容是关于JavaScript中原型与原型链的代码讲解，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

对于很多前端开发者而言，JavaScript中原型与原型链是一个比较容易疑惑的点，所以本文记录了自己对应这方面的一点理解，以后有更深的理解再来更新。

对象

想要了解原型与原型链，首先要了解什么是对象？面向对象编程（Object Oriented Programming，缩写为 OOP）是目前主流的编程范式，即把实际上各种复杂关系抽象为多个对象后对它们进行分工合作从而完成对现实环境的模拟。因此对象是单个实物的抽象，抽象所得的对象是一个容器，拥有属性（property）和方法（method）。例如，我们把学生抽象为student对象，那么属性就可以用来记录具体是哪一个年级的学生（如初一、高一等），用方法来表示学生的某种行为（如学习、玩耍等）。

构造函数（constructor）、实例对象与继承

当我们想要使用面向对象编程时，首要任务是生成对象。在JavaScript中，构造函数（constructor）就是专门用来生成实例对象的。一个构造函数，可以生成多个实例对象，这些实例对象都有相同的结构。

var Student= function () {
  this.age= 18;
};

var s = new Student();
s.age// 18

特别需要注意的是：

除了用new命令生成新的实例对象，我们还可以通过Object.create() 来创建，这种方法适用于我们没有办法拿到构造函数而只能拿到一个现有的对象。

var student1 = {
    name:'Solar',
    age:18,
    greeting:function(){
        console.log('Hello!');
    }
};
var student2 = Object.create(student1);
student2.name//Solar
student2.greeting()//Hello!

上面代码中，Object.create方法以student1对象为原型，生成了student2对象。student2继承了student1的所有属性和方法。

原型对象（prototype）

首先让我们来了解一下为什么会有原型对象（prototype）？

function Student(name, age) {
  this.name = name;
  this.age = age;
  this.greeting = function(){
    console.log('Hello!');
  }
}

var student1= new Student('Solar', '18');
var student2 = new Student('Moonbyul', '17');

student1.greeting=== student2.greeting
// false
从以上代码可以看到，通过构造函数实例出的对象，虽然都具有greeting方法，但是因为这个方法是生成在自身的每个实例对象上，也就是每生成一个实例就会新建一个greeting方法。但是其实greeting方法都是同样的，没有必要多次生成造成资源浪费，于是JavaScript的原型对象就诞生了。JavaScript规定，每个函数都有一个prototype属性，指向一个对象。
function Animal(name) {
  this.name = name;
}
Animal.prototype.color = 'white';
var cat1 = new Animal('大毛');
var cat2 = new Animal('二毛');
cat1.color // 'white'
cat2.color // 'white'
上面代码中，构造函数Animal的prototype属性，就是实例对象cat1和cat2的原型对象。原型对象上添加一个color属性，结果，实例对象都共享了该属性。
原型对象的属性不是实例对象自身的属性。只要修改原型对象，变动就立刻会体现在所有实例对象上。
Animal.prototype.color = 'yellow';
cat1.color // "yellow"
cat2.color // "yellow"
如果实例对象自身就有某个属性或方法，它就不会再去原型对象寻找这个属性或方法。
cat1.color = 'black';
cat1.color // 'black'
cat2.color // 'yellow'
Animal.prototype.color // 'yellow';
原型链（prototype chain）
JavaScript 规定，所有对象都有自己的原型对象（prototype）。一方面，任何一个对象，都可以充当其他对象的原型；另一方面，由于原型对象也是对象，所以它也有自己的原型。因此，就会形成一个“原型链”（prototype chain）：对象到原型，再到原型的原型……
如果一层层地上溯，所有对象的原型最终都可以上溯到Object.prototype，即Object构造函数的prototype属性。也就是说，所有对象都继承了Object.prototype的属性。Object.prototype的原型是null。null没有任何属性和方法，也没有自己的原型。因此，原型链的尽头就是null。
以上就是JavaScript中原型与原型链的代码讲解的详细内容，更多请关注php中文网其它相关文章！
				
				
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



      
……
标签:JavaScript中原型与原型链的代码讲解
 
相关阅读