js原型链部分详细使用说明案例

1. ‘index.html‘文件

```html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>js原型讲解</title>

</head>

<body>

<script src=‘js/person.js‘></script>

<script src=‘js/student.js‘></script>

<script src=‘js/coder.js‘></script>

<script>

var person = new Person(‘Jack‘,18,‘男‘);

person.sleep();

person.dating();

person.eat(‘蛋炒饭‘);

person.birthday();

/////student实例化对象

/***

* 实例化后的对象在查找属性或者方法的时候

* 首先在 this 自己内部查找

* 如果没有找到 就会到原型中查找

* 如果原型中没有,那么就会去原型的原型继续查找

* ...

* 直到找到为止 如果没有找到那么返回undefined或者报错

*/

var student = new Student(‘小明‘,15,‘男‘,‘县一中‘);

console.dir(student);

student.sleep();

student.dating();

student.eat(‘蛋炒饭‘);

student.birthday();

student.goSchool();

var coder = new Coder(‘Jerry‘,25,‘男‘,‘MS‘);

coder.sleep();

coder.work();

console.log(coder);

</script>

</body>

</html>

```

2. ‘js/person.js‘文件

```javascript

/****

* 定义一个Person对象

* 包含 name age gender 三个属性

*/

function Person(name, age,gender) {

this.name = name;

this.age = age;

this.gender = gender;

}

////Person的原型

Person.prototype = {

/////睡觉

sleep:function(){

console.log(this.name + ‘每天睡觉八小时‘);

},

////吃饭 传入参数food

eat:function(food){

console.log(this.name+‘特别爱吃‘+food);

},

////不需要参数

dating:function(){

console.log(‘单身狗‘);

},

////出生年份,根据年龄计算 不需要参数

birthday:function(){

var birthYear = (new Date()).getFullYear()-this.age;

console.log(this.name+‘的出生在‘+birthYear+‘年‘);

}

}

```

3. ‘js/student.js‘文件

```javascript

function Student(name,age,gender,school){

this.school = school;

Person.apply(this,[name,age,gender]);

}

// function EmptyFun(){}

// ///设置空对象的原型为Person的原型

// EmptyFun.prototype = Person.prototype;

// var temEmptyFun = new EmptyFun(); ////实例化的一个空对象

// Student.prototype = temEmptyFun; ///设置学生的原型为实例化的空对象

// Student.prototype.constructor = Person

//Object.create()可以通过你提供的原型创建一个新对象,

//这个新对象的原型就是create()的第一个参数

Student.prototype = Object.create(Person.prototype);

Student.prototype.constructor = Student

////为学生原型定义一个方法 goSchool

Student.prototype.goSchool = function(){

console.log(this.name + ‘每天早上八点准时去‘+this.school);

}

/////为学生创建一个dating方法

Student.prototype.dating = function(){

console.log(‘学校禁止早恋!‘);

}

```

4. ‘js/coder.js‘文件

```javascript

function Coder(name,age,gender,company){

Student.apply(this,[name,age,gender,company]);

}

Coder.prototype = Object.create(Student.prototype);

Coder.prototype.work = function(){

console.log(‘writing code ....../n fix bugs‘);

}

```

时间: 2024-10-20 16:52:59

js原型链部分详细使用说明案例的相关文章

深入理解JS原型链与继承

我 觉得阅读精彩的文章是提升自己最快的方法,而且我发现人在不同阶段看待同样的东西都会有不同的收获,有一天你看到一本好书或者好的文章,请记得收藏起来, 隔断时间再去看看,我想应该会有很大的收获.其实今天要讨论的主题,有许多人写过许多精彩的文章,但是今天我还是想把自己的理解的知识记录下来.我在学习 掌握JS原型链和继承的时候,就是看得@阮一峰老师的写的文章,觉得他写的技术类的文章都容易让理解,简明概要,又好理解.他是我学习JS路程里面一个比较佩服的导师,昨天重新看了他写的<Javascript 面向

js原型链与继承(初体验)

js原型链与继承是js中的重点,所以我们通过以下三个例子来进行详细的讲解. 首先定义一个对象obj,该对象的原型为obj._proto_,我们可以用ES5中的getPrototypeOf这一方法来查询obj的原型,我们通过判断obj的原型是否与Object.prototype相等来证明是否存在obj的原型,答案返回true,所以存在.然后我们定义一个函数foo(),任何一个函数都有它的prototype对象,即函数的原型,我们可以在函数的原型上添加任意属性,之后通过new一个实例化的对象可以共享

浅谈js原型链与继承

js原型链与继承是js中的重点,所以我们通过以下三个例子来进行详细的讲解. 首先定义一个对象obj,该对象的原型为obj._proto_,我们可以用ES5中的getPrototypeOf这一方法来查询obj的原型,我们通过判断obj的原型是否与Object.prototype相等来证明是否存在obj的原型,答案返回true,所以存在.然后我们定义一个函数foo(),任何一个函数都有它的prototype对象,即函数的原型,我们可以在函数的原型上添加任意属性,之后通过new一个实例化的对象可以共享

简单粗暴地理解js原型链--js面向对象编程

简单粗暴地理解js原型链--js面向对象编程 原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好. 不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么.简单粗暴点看原型链吧,想点与代码无关的事,比如人.妖以及人妖. 1)人是人他妈生的,妖是妖他妈生的.人和妖都是对象实例,而人他妈和妖他妈就是原型.原型也是对象,叫原型对象. 2)人他妈和人他爸啪啪啪能生出一堆人宝宝.妖他妈和妖他爸啪啪啪能生出一堆妖宝宝,啪啪啪就是构造函数,俗

JS 原型链图形详解

JS原型链 这篇文章是「深入ECMA-262-3」系列的一个概览和摘要.每个部分都包含了对应章节的链接,所以你可以阅读它们以便对其有更深的理解. 对象 ECMAScript做为一个高度抽象的面向对象语言,是通过对象来交互的.即使ECMAScript里边也有基本类型,但是,当需要的时候,它们也会被转换成对象. 一个对象就是一个属性集合,并拥有一个独立的prototype(原型)对象.这个prototype可以是一个对象或者null.* 让我们看一个关于对象的基本例子.一个对象的prototype是

js 原型链和继承(转)

在理解继承之前,需要知道 js 的三个东西: 什么是 JS 原型链 this 的值到底是什么 JS 的 new 到底是干什么的 1. 什么是 JS 原型链? 我们知道 JS 有对象,比如 var obj = { name: "obj" }; 我们通过控制台把 obj 打印出来: 我们会发现 obj 已经有几个属性(方法)了.那么问题来了:valueOf / toString / constructor 是怎么来?我们并没有给 obj.valueOf 赋值呀. 上面这个图有点难懂,我手画

JavaScript面向对象(二)——成员属性、静态属性、原型属性与JS原型链

前  言 上一篇博客(https://www.cnblogs.com/qdjianghao/p/10177360.html )中,我们介绍了JS中的面向对象,并详细的解释了this的指向问题.本篇博客,我们继续来学习JS的面向对象.来深入理解一下JavaScript OOP中的成员属性/方法.静态属性/方法.原型属性/方法,并且一起来探讨一下JS中的原型与原型链. 一 成员属性与成员方法 在构造函数中,通过this.属性声明.或者实例化出对象后,通过"对象.属性"追加的.都属于成员属性

js原型链的深度理解!

一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object .Function 是 JS 自带的函数对象.下面举例说明 var o1 = {}; var o2 =new Object(); var o3 = new f1(); function f1(){}; var f2 = function(){}; var f3 = new Function('str','console.log(str)'); console.log(type

JS原型链

JS每个对象都有一个内部属性[[prototype]],我们通常称之为原型.原型的值可以是一个对象,也可以是null.如果它的值是一个对象,则这个对象也一定有自己的原型.这样就形成了一条线性的链,我们称之为原型链. 访问一个对象的原型可以使用ES5中的Object.getPrototypeOf方法,或者ES6中的__proto__属性. 原型链的作用是用来实现继承,比如我们新建一个数组,数组的方法就是从数组的原型上继承而来的. 在JavaScript中,每个函数 都有一个prototype属性,