第一种:通过prototype来实现

prototype.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function Person(){} Person.prototype.username = "lisi";
Person.prototype.gender = "man";
Person.prototype.fav = ["read","eat"]; var p1 = new Person();
var p2 = new Person();
p2.username = "zhangsan";
//p2.fav.push("run");
var fav = p2.fav;
console.log(fav)
p2.fav = new Array();
p2.fav = p2.fav.concat(fav); p2.fav.push("run"); /*console.log(p1.username);
console.log(p1.fav);
console.log(p2.username);
console.log(p2.fav);*/ function User(){}
User.prototype = new Person();
User.prototype.password = "123123";
User.prototype.email = "admin@admin.com"; User.prototype.say = function(){
console.log(this);
}; var u = new User();
u.gretting="Hello";
var u1 = new User(); console.log(u.username)
u.say();
u1.say(); </script>
</head>
<body> </body>
</html> 第二种方法:通过this关键字来实现;js中的this始终指向调用它的对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function Person(name,gender){
this.name = name;
this.gender = gender;
} function User(name,gender,email,password){
this.super = Person;
this.super(name,gender);
delete this.super;
this.email = email;
this.password = password;
//this.Person(name,gender);
} var p1 = new Person("lisi","man"); var u = new User("zhangsan","msn","zhnagsan@zhangsan.com","123123123");
console.log(p1.name);
console.log(u.name);
//var p2 = new Person();
//p2.name = "lisi";
//p2.gender = "man";
</script>
</head>
<body> </body>
</html> 第三种方法:通过call或者apply来实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function Person(name,gender){
this.name = name;
this.gender = gender;
} function User(name,gender,email){ //对象冒充 动态改变 函数的执行上下文
//Person.call(this,name,gender);
Person.apply(this,[name,gender]); this.email = email; this.say = function(msg){
console.log(this);
console.log(msg);
}
} var u = new User("lisi","man","lisi@lisi.com");
console.log(u.gender);
u.say("Hello"); u.say.call(new Person("",""),"Hello1");
u.say.apply(window,["lisi"]); console.log("--------------------")
var name = "lisi";
var obj = {
name:"zhangsan",
say:function(){
console.log(this.name);
return function(){
console.log(this.name);
return function(){
console.log(this.name);
return {
name:"wangwu",
say:function(){
console.log(this.name);
} }
}
}
}
}; obj.say().call(obj)().say.apply(this); //obj.say()();
</script>
</head>
<body> </body>
</html>

JS中的继承实现方式的更多相关文章

  1. JS中写继承的方式

    有父子两个函数,代表两个类: var parent = function(){} var child = function(){} 一.直接继承 child.prototype = new paren ...

  2. js中实现继承的几种方式

    首先我们了解,js中的继承是主要是由原型链实现的.那么什么是原型链呢? 由于每个实例中都有一个指向原型对象的指针,如果一个对象的原型对象,是另一个构造函数的实例,这个对象的原型对象就会指向另一个对象的 ...

  3. Javascript中实现继承的方式

    js中实现继承和传统的面向对象语言中有所不同:传统的面向对象语言的继承由类来实现,而在js中,是通过构造原型来实现的,原型与如下几个术语有关: ①构造函数:在构造函数内部拥有一个prototype属性 ...

  4. 【学习笔记】六:面向对象的程序设计——理解JS中的对象属性、创建对象、JS中的继承

    ES中没有类的概念,这也使其对象和其他语言中的对象有所不同,ES中定义对象为:“无序属性的集合,其属性包含基本值.对象或者函数”.现在常用的创建单个对象的方法为对象字面量形式.在常见多个对象时,使用工 ...

  5. JS中的继承(上)

    JS中的继承(上) 学过java或者c#之类语言的同学,应该会对js的继承感到很困惑--不要问我怎么知道的,js的继承主要是基于原型(prototype)的,对js的原型感兴趣的同学,可以了解一下我之 ...

  6. js中的继承和重载

      js中有三种继承方式:一.通过原型(prototype)实现继承 二.借用构造函数式继承,可分为通过call()方法实现继承和通过apply()方法实现继承 仅仅通过原型继承我们可以发现在实例化子 ...

  7. html css <input> javaScript .数据类型 JS中的函数编写方式 BOM总结 DOM总结

    Day27  html css div 块标签. 特点: 独占一行,有高度和宽度 span 行元素. 特点:在同一行显示,当前行满了自动去下一行显示. 不识别高度和宽度 1.1.1.1 2.输入域标签 ...

  8. 基础篇:1.JavaScript运行在html中,引用有几种方式?—— 6.js中常用的输出方式?

    书接上文,上文提到若干条JavaScript的基础性知识,大部分都是一些概念性的东西,本着认真严谨的态度,我们要认真对待,有些条目的问题是某个知识点的周边延伸,为节约篇幅,就一起整理了,如有描述不对的 ...

  9. JS中的继承(下)

    JS中的继承(下) 在上一篇 JS中的继承(上) 我们介绍了3种比较常用的js继承方法,如果你没看过,那么建议你先看一下,因为接下来要写的内容, 是建立在此基础上的.另外本文作为我个人的读书笔记,才疏 ...

随机推荐

  1. 查看 linux cpu 、内存、服务器型号和序列号、磁盘、raid 的信息

    yum -y install dmidecode 查看cpu的型号: 查看cpu的颗数:dmidecode -t processor |grep "Version"dmidecod ...

  2. JZ2440 裸机驱动 第9章 中断体系结构

    本章目标:     了解ARM体系CPU的7种工作模式     了解S3C2410/S3C2440中断体系结构     掌握S3C2410/S3C2440的中断服务程序的编写方法 9.1 S3C241 ...

  3. 树莓派3代B型 Raspberry Pi Model 3 B 安装 centos7系统

    板子类型: Raspberry Pi Model 3 B 搭配 32G的SD卡: 下载支持树莓派版本的centos7系统 https://buildlogs.centos.org/centos/7/i ...

  4. (文章转载)织梦CMS判断不同的栏目显示不同的图片

    {dede:php} $thisid = $refObj->Fields['id']; $row = $dsql->GetOne("Select typeid From `ybs ...

  5. couldn't launch the emulator make sure the sdk directory is properly setup

    android sdk 路径中不能有空格.转到一个没有空格的文件夹下即可.

  6. android 关于listview scrollview 底部 控件无法显示的两个解决方案

    方案一 用LinearLayout实现,代码如下: <!-- 中奖纪录 by mhd --> <LinearLayout xmlns:android="http://sch ...

  7. JavaScript之图片操作3

    在页面布局中,常常会用到九宫格布局,如下图所示: 本次我们就以九宫格为基础进行图片的布局操作,首先我们以上面的图片的为例,假设每个格子的大小都相同,将每一个格子相对其父元素进行定位,这样,我们只需要控 ...

  8. R语言学习——列表

    1.列表 列表是一种泛化的向量,其并没有要求所有元素都是同一类型,其元素甚至可为任意类型. 列表格式自由,为统计的计算结果的返回提供了极便利的方法. 2.列表的创建 可以用list()函数创建列表. ...

  9. airtest IDE问题汇总

    FAQ 1.同一个脚本,使用IDE可以运行,使用命令行运行报错 原因:曾经开启过anyproxy代理,添加过HTTP_PROXY环境变量,将其取消即可 unset HTTP_PROXY https:/ ...

  10. Open Live writer 远程博客管理客户端

    1.  官网地址:http://openlivewriter.org/ 点击download下载:https://openlivewriter.azureedge.net/stable/Release ...