基于js中的原型(全面讲解)

 更新时间:2017年09月19日 08:07:18   作者:铸剑师   我要评论

下面小编就为大家带来一篇基于js中的原型(全面讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

在讲js的原型之前,必须先了解下Object和Function。

Object和Function都作为JS的自带函数,Object继承自己,Funtion继承自己,Object和Function互相是继承对方,也就是说Object和Function都既是函数也是对象。

console.log(Function instanceof Object); // true
console.log(Object instanceof Function); // true

Object 是 Function的实例,而Function是它自己的实例。

console.log(Function.prototype); // ƒ () { [native code] }
console.log(Object.prototype);  // Object

普通对象和函数对象

JavaScript中万物皆对象,但对象之间也是有区别的。分为函数对象和普通对象。

函数对象可以创建普通对象,普通对象没法创建函数对象,普通对象JS世界中最低级的小喽啰,啥特权也没有。

凡是通过new Function创建的对象都是函数对象,其他都是普通对象(通常通过Object创建),可以通过typeof来判断。

function f1(){};
typeof f1 //"function"


var o1 = new f1();
typeof o1 //"object"

var o2 = {};
typeof o2 //"object"

这边要注意的是下面这两种写法是一样的

function f1(){};  ==  var f1 = new Function();
function f2(a,b){
  alert(a+b);
}

等价于

var f2 = new Function(a,b,"alert(a+b)");

prototype、_proto_和construetor(构造函数)

下面两句话也很重要

1、每一个函数对象都有一个prototype属性,但是普通对象是没有的;

  prototype下面又有个construetor,指向这个函数。

2、每个对象都有一个名为_proto_的内部属性,指向它所对应的构造函数的原型对象,原型链基于_proto_;

好了,开始上代码和例子,建一个普通对象,我们可以看到

  1、o的确没有prototype属性

  2、o是Object的实例

  3、o的__proto__指向Object的prototype

  4、Object.prototype.constructor指向Object本身

  还可以继续往下延伸......

var o = {};
  console.log(o.prototype); //undefined
  console.log(o instanceof Object); //true
  console.log(o.__proto__ === Object.prototype) //true
  console.log(Object === Object.prototype.constructor) //true 
  console.log(Object.prototype.constructor) //function Object()
  console.log(Object.prototype.__proto__); //null

下面来一个函数对象,从下面的例子可以看出

1、demo是函数对象,f1还是普通对象

2、f1是Demo的实例

3、demo的原型prototype的__proto__指向Object的原型prototype,而Object的原型prototyped的__proto__指向null;

function Demo(){};
  var f1 = new Demo();
  console.log(f1.prototype); //undefined
  console.log(f1 instanceof Demo); //true
  console.log(f1.__proto__ === Demo.prototype); //true
  console.log(Demo === Demo.prototype.constructor) ;//true
  console.log(Demo.prototype.__proto__ === Object.prototype) ;//true
  console.log(Object.prototype.__proto__); //null

原型链

javascript中,每个对象都会在内部生成一个proto 属性,当我们访问一个对象属性时,如果这个对象不存在就回去proto 指向的对象里面找,一层一层找下去,这就是javascript原型链的概念。

f1.__proto__ ==> Demo.prototype ==> Demo.prototype.__proto__ ==> Object.prototype ==> Object.prototype.__proto__ ==> null

JS中所有的东西都是对象,所有的东西都由Object衍生而来, 即所有东西原型链的终点指向null

以上这篇基于js中的原型(全面讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • javascript加减乘除的简单实例

    javascript加减乘除的简单实例

    下面小编就为大家带来一篇javascript加减乘除的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • js操作css属性实现div层展开关闭效果的方法

    js操作css属性实现div层展开关闭效果的方法

    这篇文章主要介绍了js操作css属性实现div层展开关闭效果的方法,涉及javaScript操作css样式实现div弹出层的效果,非常具有实用价值,需要的朋友可以参考下
    2015-05-05
  • 详解javascript中的事件处理

    详解javascript中的事件处理

    这篇文章主要介绍了javascript的事件处理,需要的朋友可以参考下
    2015-11-11
  • JavaScript+CSS实现的可折叠二级菜单实例

    JavaScript+CSS实现的可折叠二级菜单实例

    这篇文章主要介绍了JavaScript+CSS实现的可折叠二级菜单,以完整实例形式分析了JavaScript基于页面元素节点及样式的动态操作实现折叠菜单的相关技巧,需要的朋友可以参考下
    2016-02-02
  • js 匿名调用实现代码

    js 匿名调用实现代码

    js中定义函数的方式有多种,函数直接量就是其中一种。如var fun = function(){},这里function如果不赋值给fun那么它就是一个匿名函数。
    2009-06-06
  • ReactNative Image组件使用详解

    ReactNative Image组件使用详解

    本篇文章主要介绍了ReactNative Image组件使用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 需灵活掌握的Bootstrap预定义排版类 你精通吗?

    需灵活掌握的Bootstrap预定义排版类 你精通吗?

    Bootstrap预定义排版类,做web前端开发的你精通吗?bootstrap前端框架到底为我们预定义了那些排版的类呢?感兴趣的小伙伴们可以参考一下
    2016-06-06
  • JavaScript预解析及相关技巧分析

    JavaScript预解析及相关技巧分析

    这篇文章主要介绍了JavaScript预解析及相关技巧,结合实例形式分析了JavaScript与解析的原理,步骤与相关技巧,需要的朋友可以参考下
    2016-04-04
  • js实现获取两个日期之间所有日期的方法

    js实现获取两个日期之间所有日期的方法

    这篇文章主要介绍了js实现获取两个日期之间所有日期的方法,涉及javascript针对日期与时间的相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • 屏蔽F1~F12的快捷键的js函数

    屏蔽F1~F12的快捷键的js函数

    keyCod从113-123分别禁用了F2-F12键,13禁用了回车键(Enter),8禁用了退格键(BackSpace)
    2010-05-05

最新评论