0

0

谈一谈javascript中继承的多种方式_javascript技巧

php中文网

php中文网

发布时间:2016-05-16 15:14:43

|

1207人浏览过

|

来源于php中文网

原创

js 是没有继承的,不过可以曲线救国,利用构造函数、原型等方法实现继承的功能。

 var o=new Object();

其实用构造函数实例化一个对象,就是继承,这里可以使用Object中的所有属性与方法。那么为什么能访问Object对象的方法,其实访问的是其原型对象的方法,所有的方法都是放在原型中而不是类中。

console.log(o.__proto__ === Object.prototype) // true 继承的本质
console.log(o.__proto__ === Object);
console.log(Object.__proto__ === Function.prototype);
console.log(Function.prototype.__proto__ === Object.prototype);
console.log(Number.__proto__ === Function.prototype);

object是万物祖先,Everything is object 嘛。 

1、内置对象都继承自object

var myNumber = new Number(10); //实例化一个数字对象

字符串对象,其实是String对象的一个实例化 

var s = ‘str';

 除了可以访问自身属性方法,还能访问父类属性方法

console.log(s.toUpperCase());
console.log(s.toString());
 

2、自定义对象的继承

// 父类
  var Person = function(){
   this.name='AV老师';
   this.test='测试中的毕福剑';
  } 
  Person.prototype={
   say:function(){
    console.log('呀买碟');
   }
  }
  // 构造函数
  var Canglaoshi = function(name,age,cup){
   this.name=name;
   this.age=age;
   this.cup=cup;
  }
  // 继承person,则拥有person原型中的方法
  Canglaoshi.prototype=new Person();
  Canglaoshi.prototype.ppp=function(){
   console.log('啪啪啪');
  }
  // 苍老师拥有了person中的方法
  var xiaocang=new Canglaoshi('空空',18,'E');
  xiaocang.say();
  console.log(xiaocang.name);
  console.log(xiaocang.age);
  console.log(xiaocang.cup);
  console.log(xiaocang.test);

3、自定义对象继承的原型链演示

MiroThinker
MiroThinker

MiroMind团队推出的研究型开源智能体,专为深度研究与复杂工具使用场景设计

下载
(function() {
   //父类
   function SuperParent() {
    this.name = 'mike';
   }

   //子类继承父亲 - 二次继承:
   function Parent() {
    this.age = 12;
   }
   Parent.prototype = new SuperParent(); //通过原型,形成链条

   var parent = new Parent();
   console.log("测试父亲可以访问爷爷属性:" + parent.name);
   console.log("测试父亲可以访问自己的属性:" + parent.age);

   //继续原型链继承 - 三次继承
   function Child() { //brother构造
    this.weight = 60;
   }
   Child.prototype = new Parent(); //继续原型链继承


   //原型链测试2
   //儿子集成爷爷
   var child = new Child();
   console.log("测试儿子可以访问爷爷的属性:" + child.name); //继承了Parent和Child,弹出mike
   console.log("测试儿子可以访问父亲的属性:" + child.age); //弹出12
   console.log("测试儿子可以访问自己独特的属性:" + child.weight); //弹出12

   //原型链测试
   //爷爷可以访问Object中的方法
   var test = new SuperParent();
   console.log(test.name);
   console.log(test.toString());
   //访问链: SuperParent构造对象--》SuperParent原型对象--》Object对象--》Obect原型对象(找到toString方法)--》null

   console.log(child.name);
   //原型链:首先访问Child构造函数,发现没有name属性--》寻找__proto__,判断起指针是否为空--》指向Child原型函数,寻找有没有name属性--》
   //---》没有找到,则判断其__proto__属性是否为null,如果不为null,继续搜索--》找到parent对象,检查是否有name属性,没有。。。。
  })()

4、构造函数继承

(function() {
   function People() {
    this.race = '人类';
   }
   People.prototype = {
    eat: function() {
     alert('吃吃吃');
    }
   }

   /*人妖对象*/
   function Shemale(name, skin) {
    People.apply(this, arguments); // 用call也是一样的,注意第二个参数
    this.name = name;
    this.skin = skin;
   }
   //实例化 
   var zhangsan = new Shemale('张三', '黄皮肤')
   console.log(zhangsan.name); //张三
   console.log(zhangsan.skin); //黄皮肤
   console.log(zhangsan.race); //人类
  })()

5、组合继承

(function() {
   function Person(name, age) {
    this.name = name;
    this.age = age;
   }
   Person.prototype.say = function() {}

   function Man(name, age, no) {
    /*会自动调用Person的方法,同时将name age传递过去*/
    Person.call(this, name, age);
    //自己的属性
    this.no = no;
   }
   Man.prototype = new Person();

   var man = new Man("张三", 11, "0001");
   console.log(man.name);
   console.log(man.age);
   console.log(man.no);
  })()

6、拷贝继承


7、寄生组合继承



8、使用第三方框架实现继承

 
 
 
                

相关专题

更多
java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

2

2026.01.29

java配置环境变量教程合集
java配置环境变量教程合集

本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容,阅读专题下面的文章了解更多详细操作。

2

2026.01.29

java成品学习网站推荐大全
java成品学习网站推荐大全

本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容,阅读专题下面的文章了解更多详细推荐内容。

0

2026.01.29

Java字符串处理使用教程合集
Java字符串处理使用教程合集

本专题整合了Java字符串截取、处理、使用、实战等等教程内容,阅读专题下面的文章了解详细操作教程。

0

2026.01.29

Java空对象相关教程合集
Java空对象相关教程合集

本专题整合了Java空对象相关教程,阅读专题下面的文章了解更多详细内容。

3

2026.01.29

clawdbot ai使用教程 保姆级clawdbot部署安装手册
clawdbot ai使用教程 保姆级clawdbot部署安装手册

Clawdbot是一个“有灵魂”的AI助手,可以帮用户清空收件箱、发送电子邮件、管理日历、办理航班值机等等,并且可以接入用户常用的任何聊天APP,所有的操作均可通过WhatsApp、Telegram等平台完成,用户只需通过对话,就能操控设备自动执行各类任务。

25

2026.01.29

clawdbot龙虾机器人官网入口 clawdbot ai官方网站地址
clawdbot龙虾机器人官网入口 clawdbot ai官方网站地址

clawdbot龙虾机器人官网入口:https://clawd.bot/,clawdbot ai是一个“有灵魂”的AI助手,可以帮用户清空收件箱、发送电子邮件、管理日历、办理航班值机等等,并且可以接入用户常用的任何聊天APP,所有的操作均可通过WhatsApp、Telegram等平台完成,用户只需通过对话,就能操控设备自动执行各类任务。

16

2026.01.29

Golang 网络安全与加密实战
Golang 网络安全与加密实战

本专题系统讲解 Golang 在网络安全与加密技术中的应用,包括对称加密与非对称加密(AES、RSA)、哈希与数字签名、JWT身份认证、SSL/TLS 安全通信、常见网络攻击防范(如SQL注入、XSS、CSRF)及其防护措施。通过实战案例,帮助学习者掌握 如何使用 Go 语言保障网络通信的安全性,保护用户数据与隐私。

8

2026.01.29

俄罗斯Yandex引擎入口
俄罗斯Yandex引擎入口

2026年俄罗斯Yandex搜索引擎最新入口汇总,涵盖免登录、多语言支持、无广告视频播放及本地化服务等核心功能。阅读专题下面的文章了解更多详细内容。

622

2026.01.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.3万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.5万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号