JS原型链怎么理解


Posted in Javascript onJune 27, 2016

在谈原型链之前,我们首先要了解自定义函数与 Function 之间是什么关系,而构造函数、原型和实例之间又存在什么千丝万缕的关系呢?其实,所有的函数都是 Function 的实例。在构造函数上都有一个原型属性 prototype,该属性也是一个对象;那么在原型对象上有一个 constructor 属性,该属性指向的就是构造函数;而实例对象上有一个 _proto_ 属性,该属性也指向原型对象,并且该属性不是标准属性,不可以用在编程中,该属性用于浏览器内部使用。

// _proto_
 在函数里有一个属性prototype
 由该函数创建的对象默认会连接到该属性上
   //prototype 与 _proto_ 的关系
 _proto_是站在对象角度来说的
 prototype 是站在构造函数角度来说的

下面,我们来看图说话。

1、构造函数、原型和实例之间的关系

        ①+Object

②+Function+Object+Array

JS原型链怎么理解

了解这些之后,我们再来讨论什么是原型链。说白了,其实就是有限的实例对象和原型之间组成有限链,就是用来实现共享属性和继承的。下面,我们看代码说话。

var obj = new Object();
对象是有原型对象的
原型对象也有原型对象 
  obj._proto_._proto_._proto_
原型对象也有原型对象,对象的原型对象一直往上找,会找到一个null
// 原型链示例
  var arr = [];
  arr -> Array.prototype ->Object.prototype -> null
  var o = new Object();
  o -> Object.prototype -> null;
  function Foo1(){
  this.name1 = '1';
}
function Foo2(){
  this.name2 = '2';
}
Foo2.prototype = new Foo1();
function Foo3(){
  this.name = '3';
}
Foo3.prototype = new Foo2();
var foo3 = new Foo3();
console.dir(foo3);

JS原型链怎么理解

JS原型链怎么理解

接下来就是继承问题了。

2、继承 

 1)原型继承

function Animal(name){
    this.name = name;
  }
  function Tiger(color){
    this.color = color;
  }
//  var tiger = new Tiger('yellow');
//  console.log(tiger.color);
//  console.log(tiger.name); //undefined
//   Tiger.prototype = new Animal('老虎');  //一种方式
  Object.prototype.name = '大老虎';  //第二种方式
    var tiger = new Tiger('yellow');
    console.log(tiger.color);
    console.log(tiger.name);

值得注意的是,这里存在两个主要的问题:①它不方便给父级类型传递参数;②父级类型当中的引用类型被所有的实例共享

2)ES5 提供了Object.create() 方法来实现继承

————做兼容
 //shim垫片
  function create(obj){
    if(Object.create){
      return Object.create(obj);
    }else{
      function Foo(){}
      Foo.prototype = obj;
      return new Foo();
    }
  }

这种方法是ES5的新特性,其实就是复制继承。

3)拷贝继承

var obj = {};
 obj.extend = function(obj){
   for(var k in obj){
    this[k] = obj[k];
   }
 }

 4)借用构造函数继承——被借用的构造函数中原型上的成员没有被借过来

function Animal(name){
  this.name = name;
}
function Mouse(nickname){
  Animal.call(this,'老鼠');
  this.nickname = nickname;
}
var m = new Mouse('杰瑞');
console.log(m.name);
console.log(m.nickname);

存在的问题:可以解决原型继承当中传参问题,但是父类型当中的原型对象上的成员(属性和方法)不能被继承到

5)组合继承——prototype对象是有动态性的

function Person(name){
  this.name = name;
}
Person.prototype.showName = function(){
  console.log(this.name);
}
function Student(name,age){
  Person.call(this,name);
  this.age = age;
}
Student.prototype = new Person();
Student.prototype.contructor = Student;
Student.prototype.showAge = function(){
  console.log(this.age);
}
var stu = new Student('张三',12);
stu.showName();
stu.showAge();

【原型继承+借用构造函数继承】它的特点就是属性每个实例一份,方法共享

【小结】套用一句很粗暴的话,所谓原型链就是找妈的一种行为方式,就可以理解为人是人他妈生的,妖是妖他妈生的。原型链的核心其实就只有一个:属性共享和独立的控制,当你的对象实例需要独立的属性,所有做法的本质都是在对象实例里面创建属性。若不考虑太多,你大可以在Person里面直接定义你所需要独立的属性来覆盖掉原型的属性。总之,使用原型继承的时候,要对于原型中的属性要特别注意,因为他们都是牵一发而动全身的存在。现在最常用的方法是组合模式。

1、原型链

1)构造函数、原型和实例的关系

①构造函数都有一个属性prototype,这个属性是一个对象(Object的实例) ②原型对象prototype里面有一个constructor属性,该属性指向原型对象所属的构造函数 ③实例对象都有一个_proto_属性,该属性也指向构造函数的原型对象,它是一个非标准属性,不可以用于编程,它是用于浏览器自己使用的2)prototype与_proto_的关系

①prototype是构造函数的属性

②_proto_是实例对象的属性

——这两者都指向同一个对象

【总结】i)函数也是对象,对象不一定是函数;

ii)对象的本质:无序的键值对集合;键值对当中的值可以是任意数据类型的值

iii)对象就是一个容器,这个容器当中放的是(属性和方法)

3)属性搜索

①在访问对象的某个成员的时候会先在对象中找是否存在

②如果当前对象中没有就在构造函数的原型对象中找

③如果原型对象中没有找到就到原型对象的原型上找

④知道Object的原型对象的原型是null为止

2、Function

——所有函数都是Function的实例

①本地对象:独立于宿主环境(浏览器)的对象——包括Object、Array、Date、RegExp、Function、Error、Number、String、Boolean

②内置对象——包括Math、Global(window,在js中就是全局变量),使用的时候不需要new

③宿主对象——包括自定义对象、DOM、BOM

以上所述是小编给大家介绍的JS原型链怎么理解的全部叙述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 省地市级联选择
Feb 07 Javascript
javascript中的作用域和上下文使用简要概述
Dec 05 Javascript
做web开发 先学JavaScript
Dec 12 Javascript
js实现的黑背景灰色二级导航菜单效果代码
Aug 24 Javascript
js实现n秒倒计时后才可以点击的效果
Dec 20 Javascript
JavaScript事件类型中UI事件详解
Jan 14 Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 Javascript
node文件上传功能简易实现代码
Jun 16 Javascript
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
May 16 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
Aug 04 Javascript
JavaScript事件的委托(代理)的用法示例详解
Feb 18 Javascript
js选择器全面解析
Jun 27 #Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 #Javascript
jQuery实现每隔几条元素增加1条线的方法
Jun 27 #Javascript
jQuery实现查找链接文字替换属性的方法
Jun 27 #Javascript
全面了解javascript三元运算符
Jun 27 #Javascript
javascript运算符——逻辑运算符全面解析
Jun 27 #Javascript
使用vue.js制作分页组件
Jun 27 #Javascript
You might like
PHP获取数组最大值下标的方法
2015/05/12 PHP
php如何获取文件的扩展名
2015/10/28 PHP
PHP微信开发之有道翻译
2016/06/23 PHP
简单实现php上传文件功能
2017/09/21 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
Thinkphp5框架使用validate实现验证功能的方法
2019/08/27 PHP
在Laravel 中实现是否关注的示例
2019/10/22 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
IE iframe的onload方法分析小结
2010/01/07 Javascript
javascript制作游戏开发碰撞检测的封装代码
2015/03/31 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
2016/04/29 Javascript
基于 Vue 实现一个酷炫的 menu插件
2017/11/14 Javascript
关于Vue源码vm.$watch()内部原理详解
2019/04/26 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
2019/04/30 Javascript
JS实现动态添加外部js、css到head标签的方法
2019/06/05 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
2020/05/25 Javascript
[00:12]2018DOTA2亚洲邀请赛 Sccc亮相SOLO赛,今年他又会有什么样的战绩?
2018/04/06 DOTA
[02:03]风行者至宝清风环佩外观展示
2020/09/05 DOTA
python3使用tkinter实现ui界面简单实例
2014/01/10 Python
python3简单实现微信爬虫
2015/04/09 Python
python print 按逗号或空格分隔的方法
2018/05/02 Python
解决Python3.5+OpenCV3.2读取图像的问题
2018/12/05 Python
Jupyter notebook在mac:linux上的配置和远程访问的方法
2019/01/14 Python
在交互式环境中执行Python程序过程详解
2019/07/12 Python
简单的Python调度器Schedule详解
2019/08/30 Python
python db类用法说明
2020/07/07 Python
Python学习之time模块的基本使用
2021/01/17 Python
细说CSS3中的选择符
2008/10/17 HTML / CSS
使用placeholder属性设置input文本框的提示信息
2020/02/19 HTML / CSS
美国知名珠宝首饰品牌:Gemvara
2017/10/06 全球购物
社区工作者思想汇报
2014/01/13 职场文书
房屋买卖协议书范本
2014/04/10 职场文书
纠纷协议书
2014/04/16 职场文书