es5中类与继承

最新推荐文章于 2023-03-20 10:44:15 发布
最新推荐文章于 2023-03-20 10:44:15 发布
阅读量134 收藏
点赞数
原文链接：http://www.cnblogs.com/Spinoza/p/9364237.html
版权 
  1 <!doctype html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <meta name="description" content="">
  6         <meta name="viewport" content="width=device-width, initial-scale=1">
  7 
  8         <script>
  9 
 10 
 11  // es5里面的类  
 12         
 13 
 14 //1.最简单的类
 15         // function Person(){
 16 
 17         //     this.name='张三';
 18         //     this.age=20;
 19         // }
 20         // var p=new Person();
 21         // alert(p.name);
 22 
 23 
 24 
 25 //2、构造函数和原型链里面增加方法
 26 
 27 
 28         // function Person(){
 29 
 30         //     this.name='张三';  /*属性*/
 31         //     this.age=20;
 32         //     this.run=function(){
 33 
 34         //         alert(this.name+'在运动');
 35         //     }
 36 
 37         // }
 38         // //原型链上面的属性会被多个实例共享   构造函数不会
 39         // Person.prototype.sex="男";
 40         // Person.prototype.work=function(){
 41         //     alert(this.name+'在工作');
 42         
 43         // }
 44         // var p=new Person();
 45         // // alert(p.name);
 46         // // p.run();
 47         // p.work(); //调用原型方法
 48 
 49 
 50 
 51 //3类里面的静态方法
 52 
 53 
 54         // function Person(){
 55 
 56         //     this.name='张三';  /*属性*/
 57         //     this.age=20;
 58         //     this.run=function(){  /*实例方法*/
 59 
 60         //         alert(this.name+'在运动');
 61         //     }
 62 
 63         // }
 64         //声明静态方法    
 65         // Person.getInfo=function(){
 66 
 67         //     alert('我是静态方法');
 68         // }
 69         // //原型链上面的属性会被多个实例共享   构造函数不会
 70         // Person.prototype.sex="男";
 71         // Person.prototype.work=function(){
 72         //     alert(this.name+'在工作');
 73 
 74         // }
 75         // var p=new Person();    
 76         // p.work();
 77 
 78         // //调用静态方法
 79         // Person.getInfo();
 80 
 81 
 82 
 83 // 4、es5里面的继承   对象冒充实现继承
 84 
 85 
 86     //    function Person(){
 87     //         this.name='张三';  /*属性*/
 88     //         this.age=20;
 89     //         this.run=function(){  /*实例方法*/
 90     //             alert(this.name+'在运动');
 91     //         }
 92 
 93     //     }      
 94     //     Person.prototype.sex="男";
 95     //     Person.prototype.work=function(){
 96     //          alert(this.name+'在工作');
 97 
 98     //     }
 99        
100     //     //Web类 继承Person类   使用原型链+对象冒充的组合继承模式
101 
102     //     function Web(){
103 
104     //         Person.call(this);    /*对象冒充实现继承*/
105     //     }
106 
107     //     var w=new Web();
108     //    // w.run();  //对象冒充可以继承构造函数里面的属性和方法
109 
110     //     w.work();  //对象冒充可以继承构造函数里面的属性和方法   但是没法继承原型链上面的属性和方法
111 
112 
113 
114 
115 // 5、es5里面的继承   原型链实现继承
116 
117     //    function Person(){
118     //         this.name='张三';  /*属性*/
119     //         this.age=20;
120     //         this.run=function(){  /*实例方法*/
121     //             alert(this.name+'在运动');
122     //         }
123 
124     //     }      
125     //     Person.prototype.sex="男";
126     //     Person.prototype.work=function(){
127     //          alert(this.name+'在工作');
128 
129     //     }
130        
131     //     //Web类 继承Person类   原型链+对象冒充的组合继承模式
132 
133     //     function Web(){
134          
135     //     }
136 
137     //    Web.prototype=new Person();   //原型链实现继承
138     //    var w=new Web();
139     //     //原型链实现继承:可以继承构造函数里面的属性和方法 也可以继承原型链上面的属性和方法
140     //     //w.run();
141 
142     //     w.work();
143 
144 
145 
146 
147 // 6、 原型链实现继承的 问题？
148 
149     //    function Person(name,age){
150     //         this.name=name;  /*属性*/
151     //         this.age=age;
152     //         this.run=function(){  /*实例方法*/
153     //             alert(this.name+'在运动');
154     //         }
155 
156     //     }      
157     //     Person.prototype.sex="男";
158     //     Person.prototype.work=function(){
159     //          alert(this.name+'在工作');
160 
161     //     }
162        
163     //    var p=new Person('李四',20);
164     //    p.run();
165 
166 
167 
168 
169 
170 
171     // function Person(name,age){
172     //         this.name=name;  /*属性*/
173     //         this.age=age;
174     //         this.run=function(){  /*实例方法*/
175     //             alert(this.name+'在运动');
176     //         }
177 
178     // }      
179     // Person.prototype.sex="男";
180     // Person.prototype.work=function(){
181     //         alert(this.name+'在工作');
182 
183     // }
184        
185       
186     // function Web(name,age){
187 
188         
189     // }
190 
191     // Web.prototype=new Person();
192 
193     // var w=new Web('赵四',20);   //实例化子类的时候没法给父类传参
194 
195     // w.run();   //undefined 在运动
196 
197     // // var w1=new Web('王五',22);
198 
199 
200 
201 
202 
203 
204 //7.原型链+对象冒充的组合继承模式
205 
206 
207 //   function Person(name,age){
208 //             this.name=name;  /*属性*/
209 //             this.age=age;
210 //             this.run=function(){  /*实例方法*/
211 //                 alert(this.name+'在运动');
212 //             }
213 
214 //     }      
215 //     Person.prototype.sex="男";
216 //     Person.prototype.work=function(){
217 //             alert(this.name+'在工作');
218 
219 //     }
220        
221       
222 //     function Web(name,age){
223 
224 //         Person.call(this,name,age);   //对象冒充继承   实例化子类可以给父类传参
225 //     }
226 
227 //     Web.prototype=new Person();
228 
229 //     var w=new Web('赵四',20);   //实例化子类的时候没法给父类传参
230 
231 //     // w.run();
232 //     w.work();
233 
234 //     // var w1=new Web('王五',22);
235 
236 
237 
238 
239 
240 
241 //8、原型链+对象冒充继承的另一种方式
242 
243 
244    function Person(name,age){
245             this.name=name;  /*属性*/
246             this.age=age;
247             this.run=function(){  /*实例方法*/
248                 alert(this.name+'在运动');
249             }
250 
251     }      
252     Person.prototype.sex="男";
253     Person.prototype.work=function(){
254             alert(this.name+'在工作');
255 
256     }
257        
258       
259     function Web(name,age){
260 
261         Person.call(this,name,age);   //对象冒充继承  可以继承构造函数里面的属性和方法、实例化子类可以给父类传参
262     }
263 
264     Web.prototype=Person.prototype;
265 
266     var w=new Web('赵四',20);   //实例化子类的时候没法给父类传参
267 
268      w.run();
269     // w.work();
270 
271     // var w1=new Web('王五',22);
272 
273 
274 
275 
276 
277 
278 
279         </script>
280 
281     </head>
282     <body>
283      
284     </body>
285 </html>

 

转载于:https://www.cnblogs.com/Spinoza/p/9364237.html

aifan2109
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript 原型与原型链以及继承方式
阳光、男孩
12-27 244
原型 ECMAScript 中描述了原型链的概念，并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。简单回顾一下构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。那么，假如我们让原型对象等于另一个类型的实例，结果会怎么样呢？显然，此时的原型对象将包含一个指向另一个...
关于 ES 5 中的类、继承 小记
VirgoYellow 的专栏
05-17 193
ES 5 ---- 类 // 构造函数里定义属性 & 方法 function Person() { this.name = 'zhangsan'; this.age = 18; this.run = function() { console.log(`${this.name}在跑步。`); } } // 原型链上定义属性 & 方法 Person.prototype.sex = '男'; Person.prototype.work = func
原型、原型链
weixin_44771007的博客
02-28 192
一句话：原型链就是通过对象的__proto__属性连接起来的链状结构 所有的函数都是由function构造函数创建 所有的原型对象都是由Object创建 只要是对象，就有__proto__属性指向自身的原型 函数也是对象 ...
git stash使用，原型原型链，TypeScript安装指令基础类型
weixin_61023950的博客
02-15 169
原型prototype 显式原型每个函数都有一个 prototype 属性，被称为显式原型，里面包含了这个构造函数公共的方法__proto__ 隐式原型每个实例对象都会有_ proto 属性,其被称为隐式原型每一个实例对象的隐式原型 proto _属性指向自身构造函数的显式原型 prototype// true原型链。
原型链 以及TypeScript理解(个人理解)
m0_73819206的博客
02-15 311
原型链 以及TypeScript理解
typescript(4)中的类 Es5中的类和静态方法 继承（原型链继承、对象冒充继承、原型链+对象冒充组合继承）
weixin_43742121的博客
05-30 311
1、最简单的类，构造函数 function Person(){ this.name = 'jack'; this.age = 18; } var p = new Person();//实例化一个方法 console.log(`${p.name}---${p.age}`); 2、构造函数和原型链里面增加方法 //构造函数上面的属性不会被多个实例共享 function Pers...
ES5的继承
酷爱前端的小陈博客
04-07 208
ES6之前并没有给我们提供 extends 继承。我们可以通过构造函数+原型对象模拟实现继承，被称为组合继承。 1 call() 调用这个函数, 并且修改函数运行时的 this 指向 fun.call(thisArg, arg1, arg2, ...) thisArg ：当前调用函数 this 的指向对象 arg1，arg2：传递的其他参数 call()的两个作用： 1. call() 可以调用函数 fn.call(); 2. call() 可以改变这个函数的thi.....
es5中的类、原型链、静态方法、继承
qq_36742720的博客
04-27 514
下面一段代码，讲解了如何使用es5创建一个类、设置原型链属性方法、设置静态方法 function Person(name,age) { // 构造函数里面的方法和属性 this.name=name this.age=age this.run=function(){ console.log(`${this.name}-----${this.a...
设计模式——原型模式（TypeScript版）
qq_34106891的博客
04-21 847
一、定义 用原型实例指定创建对象的种类，并且通过拷贝这些原型，创建新的对象。简言之就是通过克隆来创建一个一模一样的对象。 二、javascript中原型和原型链 与java、C#这样以类为中心的编程语言不同，javascript是基于原型的面向对象编程语言，其根本就是原型和原型链，为了更好的理解JavaScript中的实现原型模式，首先了解一下JavaScript中的原型和原型链。 2....
git stash、原型链以及入门TypeScript
qq_35452726的博客
02-15 163
git stash、原型链以及入门TypeScript
Typescript之原型对象prototype深入了解
Steve.lau的博客
01-26 7596
Typescript之原型对象prototype 文章目录Typescript之原型对象prototype前言一、prototype是什么？二、使用步骤1.引入库2.读入数据总结 前言 本文主要描述在Typescript下的原型对象prototype以及获取原型对象的方法。 提示：以下是本篇文章正文内容，下面案例可供参考 一、prototype是什么？ 在JavaScript中，prototype首先是个object，是实现面向对象的一个重要机制。 每个函数（function）就是一个对象（Fun
TypeScript入门笔记（三）
丑小鸭变黑天鹅的博客
06-15 881
typescript学习笔记
TypeScript类和继承
weixin_42560424的博客
03-20 2095
TypeScript中的类和继承可以帮助我们更好地组织代码，并且使得代码更易于维护和扩展。在TypeScript中，可以使用class关键字来定义一个类，然后使用extends关键字来实现继承。
Typescript学习笔记——继承
PrototypeOne的博客
01-17 1754
一、什么是继承？ 继承是类与类之间的关系，是通过扩展其他类而形成新类来实现的，原来的类称为父类（super class）或基类，新类称为原来类的子类或派生类。在子类中，不仅包含父类的属性和方法，还可以增加新的属性和方法，使得父类的基本特征可被所有子类的对象共享。 二、继承的简单样例 Cat extends Animal， 此时Cat为子类，Animal为父类，使用继承之后子类会自动继承父类中的属性和方法。 class Animal{ } class Cat extends Animal{ }
TS学习笔记05 JS继承
sakura的博客
02-09 1093
TS学习笔记05 JS继承
浅谈TypeScript语法
默默前行，勿喜、勿悲、一切随缘！
06-17 9936
Angular是用TypeScript构建的 TypeScript并不是一门全新的语言，而是ES6的超集。所有的ES6代码都是完全有效且可编译的TypeScript代码。 说明一下：什么是ES5？什么是ES6？ES5是ECMAScript5的缩写，也被称为“普通的JavaScript”。ES5就是大家熟知的JavaScript，它能够运行在大部分浏览器上。ES6则是下一个版本的Java
详解Typescript中继承的实现
黑洞视界的博客
05-19 3059
学习javascript也有一段时间了，打算从今天开始记录自己的一些理解。 此篇文章主要是记录自己对Typescript在编译成es5的代码时如何实现继承的理解。 关于闭包的原理和原型继承，请参考《JavaScript高级程序设计》，上面解释地很清楚。
TypeScript学习（四）：对象的定义及使用
热门推荐
Kreme的博客
10-23 2万+
前面我们说到了数据类型，像什么布尔类型，数值类型，字符串类型等等，在开发中，我们还会遇到很多像对象、数组、函数等类型，那么在typescript中是怎么定义这些类型的？ 对象(object) 我们先介绍下在JavaScript中式怎么定义对象的，在我之前的博客中有提到关于原型链的理解，那里面有对于对象的构造函数-实例对象-原型对象的一个介绍（浅谈我对原型链的理解），这里我再简单说一下，在Jav...
TypeScript学习（三）ts中的类
qq_42584511的博客
06-08 1020
TypeScript学习（三）ts中的类 类 1.es5的类 1.1构造函数 只有属性 function Person(){ this.name="张三", this.age=20 } var p=new Person() console.log(p.name)//张三 属性和方法 function Person(){ this.name="张三"; this.age=20; this.run=function(){ console.log(this
js 用ES5写类的继承
最新发布
04-04
使用ES5写类的继承可以通过以下方式： 1. 定义父类构造函数 ```javascript function Animal(name) { this.name = name; } Animal.prototype.sayName = function() { console.log(this.name); } ``` 2. 定义...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值