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 相关文章推荐
浅谈JavaScript中面向对象技术的模拟
Sep 25 Javascript
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
Oct 25 Javascript
js 键盘记录实现(兼容FireFox和IE)
Feb 07 Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
Apr 02 Javascript
js 处理数组重复元素示例代码
Dec 27 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
Aug 24 Javascript
jQuery滚动加载图片实现原理
Dec 14 Javascript
Vue常用指令V-model用法
Mar 08 Javascript
微信、QQ、微博、Safari中使用js唤起App
Jan 24 Javascript
Javasript设计模式之链式调用详解
Apr 26 Javascript
Angular5中状态管理的实现
Sep 03 Javascript
微信小程序实现锚点跳转
Nov 23 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&java(二)
2006/10/09 PHP
php mysql_real_escape_string函数用法与实例教程
2013/09/30 PHP
php语言的7种基本的排序方法
2020/12/28 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
JSON 和 JavaScript eval使用说明
2010/06/13 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
2013/02/18 Javascript
jquery cookie实现的简单换肤功能适合小网站
2013/08/25 Javascript
JsRender for object语法简介
2014/10/31 Javascript
jquery加载图片时以淡入方式显示的方法
2015/01/14 Javascript
JavaScript函数详解
2015/02/27 Javascript
jquery实现简单的无缝滚动
2015/04/15 Javascript
ajax读取数据后使用jqchart显示图表的方法
2015/06/10 Javascript
Bootstrap框架实现广告轮播效果
2016/11/28 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
2017/01/04 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
2017/05/23 Javascript
vue2.0中click点击当前li实现动态切换class
2017/06/21 Javascript
vue动态设置img的src路径实例
2018/09/18 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
2018/11/07 Javascript
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
微信小程序 checkbox使用实例解析
2019/09/09 Javascript
在vue中使用jsonp进行跨域请求接口操作
2020/10/29 Javascript
Taro小程序自定义顶部导航栏功能的实现
2020/12/17 Javascript
python实现读取命令行参数的方法
2015/05/22 Python
pycharm中连接mysql数据库的步骤详解
2017/05/02 Python
python安装numpy&安装matplotlib& scipy的教程
2017/11/02 Python
python自动发邮件库yagmail的示例代码
2018/02/23 Python
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
pytorch索引查找 index_select的例子
2019/08/18 Python
实例代码讲解Python 线程池
2020/08/24 Python
利用Python实现最小二乘法与梯度下降算法
2021/02/21 Python
德国隐形眼镜店:LuckyLens
2018/07/29 全球购物
品恩科技软件测试面试题
2014/10/26 面试题
2015年数学教研工作总结
2015/07/22 职场文书
JS中一些高效的魔法运算符总结
2021/05/06 Javascript
详解Redis集群搭建的三种方式
2021/05/31 Redis