文档章节

JavaScript原型prototype

bithup
 bithup
发布于 2017/08/09 20:07
字数 1167
阅读 10
收藏 0

一、JavaScript构造函数

构造函数的写法

function Car(size,color){
    this.size = size;
    this.color = color;
    this.run = function(){
                   console.log("run");
               }
}

var Car = function(size,color){
    this.size = size;
    this.color = color;
    this.run = function(){
                   console.log("run");
               }
}

注:构造函数中定义的属性,在该函数创建的对象中是不存在的。

方法写在构造函数的内部或外部

//函数内的方法
function Car(size,color){
    this.size = size;
    this.color = color;
    this.run = function(){
                   console.log("run");
               }
}


//prototype上的方法
function Car(size,color){
    this.size = size;
    this.color = color;
}

Car.prototype.run = function(){
    console.log("run");
}

//另一种写法
Car.prototype = {
    run: function(){
        console.log("run");
    }
}

prototype的使用

Car.prototype = {
    run: function(){
        console.log("run");
    }
}

//与上面直接使用对象字面量赋值不同,下面的方式使用函数表达式赋值
//这种方式的好处是可以封装私有的function,可以达到public/private的效果
Car.prototype = function(){
    return {
        run: function(){console.log("run");}
    }
}
//问:如果不使用return返回一个对象,上面的方式会出错吗?

二、Function和Object对象

创建函数的两种方式

var func = function(){}

var func = new Function(){}

//function关键字等价于new Function

使用typeof输出一个对象的类型

alert(typeof(Function))); 
alert(typeof(new Function())); 
alert(typeof(Array)); 
alert(typeof(Object)); 
alert(typeof(new Array())); 
alert(typeof(new Date())); 
alert(typeof(new Object())); 

//前四条语句都会返回“function”,后三条返回“object”
//由此可见 new Function返回的还是一个Function对象
//Object也是函数.因为Object的结构是function Object(){native code}.

三、prototype、__proto__、constructor

prototype是Function才有的属性,注意Function的实例也是Function

__proto__是Object对象中的属性,Firefox暴露出该属性

constructor是Object对象中的属性,指向构造函数。

四、定义函数、创建对象的过程

  • 定义一个函数F,JavaScript解释器会为该函数添加一个prototype属性,并创建一个prototype对象,函数的prototype属性的值是指向该prototype对象的引用;
  • prototype对象中添加一个constructor属性,指向该函数;
  • 使用函数F创建对象,为该对象添加一个__proto__属性,指向F的prototype对象,该对象也具有constructor属性,constuctor属性可以用来判断对象的类型是否相同,但是constructor属性是可变的,所以并不一定正确,instanceof操作符更可靠。
  • var Person = function () { };
    var p = new Person();
    
    //创建对象的过程如下
    
    var p={};
    p.__proto__=Person.prototype;
    Person.call(p);
    
    //使用call()函数是,this指针指向谁

     

五、原型链的顶端为null

console.log(Object.prototype);//Object
console.log(Object.prototype.protoype);//undefined
console.log(Object.prototype.__proto__);//null
console.log(Function.prototype);//ƒ () { [native code] }
console.log(Function.prototype.protoype);//undefined
console.log(Function.prototype.__proto__);
/*{
constructor:ƒ Object()
hasOwnProperty:ƒ hasOwnProperty()
isPrototypeOf:ƒ isPrototypeOf()
propertyIsEnumerable:ƒ propertyIsEnumerable()
toLocaleString:ƒ toLocaleString()
toString:ƒ toString()
valueOf:ƒ valueOf()
__defineGetter__:ƒ __defineGetter__()
__defineSetter__:ƒ __defineSetter__()
__lookupGetter__:ƒ __lookupGetter__()
__lookupSetter__:ƒ __lookupSetter__()
get __proto__:ƒ __proto__()
set __proto__:ƒ __proto__()
}
*/

首先要明确一点,原型链是指对象的原型链,所以原型链上的所有节点都是对象,不能是字符串、数字、布尔值等原始类型。

另外,规范要求原型链必须是有限长度的(从任一节点出发,经过有限步骤后必须到达一个终点。显然也不能有环。)

那么,应该用什么对象作为终点呢?很显然应该用一个特殊的对象。

好吧,Object.prototype确实是个特殊对象,我们先假设用它做终点。那么考虑一下,当你取它的原型时应该怎么办?即

Object.prototype.__proto__;

应该返回什么?

取一个对象的属性时,可能发生三种情况:

  1. 如果属性存在,那么返回属性的值。

  2. 如果属性不存在,那么返回undefined。

  3. 不管属性存在还是不存在,有可能抛异常。

我们已经假设Object.prototype是终点了,所以看起来不能是情况1。另外,抛出异常也不是好的设计,所以也不是情况3。那么情况2呢,它不存在原型属性,返回undefined怎么样?也不好,因为返回undefined一种解释是原型不存在,但是也相当于原型就是undefined。这样,在原型链上就会存在一个非对象的值。

所以,最佳选择就是null。一方面,你没法访问null的属性,所以起到了终止原型链的作用;另一方面,null在某种意义上也是一种对象,即空对象,因为null一开始就是为表示一个“空”的对象存在的。这样一来,就不会违反“原型链上只能有对象”的约定。

所以,“原型链的终点是null”虽然不是必须不可的,但是却是最合理的。

---------------------------------------------

 

function 和prototype本身都含__proto__,其实本身也都是对象,自己继承过来的,他们2个也是基本类型的实例。http://www.cnblogs.com/danghuijian/p/3755755.html

 

原生类型包括:number,string, bool, null, undefined;

非原生类型包括(对象类型):object, array, function

 

© 著作权归作者所有

上一篇: JSTL与自定义标签
下一篇: Oracle Database基础
bithup
粉丝 8
博文 101
码字总数 82172
作品 0
朝阳
程序员
私信 提问
关于javascript的原型和原型链,看我就够了(一)

关于js的原型和原型链,有人觉得这是很头疼的一块知识点,其实不然,它很基础,不信,往下看 要了解原型和原型链,我们得先从对象说起 创建对象 创建对象的三种方式: 对象直接量 通过对象直...

陌上寒
2018/11/03
0
0
关于javascript的原型和原型链,看我就够了(三)

温故 我们先回顾一下前两天讨论的内容 创建对象的三种方式 通过对象直接量 通过new创建对象 通过Object.create() js中对象分为两种 函数对象 普通对象 原型对象prototype 每一个函数对象都有...

陌上寒
2018/11/04
0
0
JS中的prototype的一些理解

JS中的phototype是JS中比较难理解的一个部分 本文基于下面几个知识点: 1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是,现在有1个类A,我想要创建一个类B,这个类是...

Doublec
2015/05/14
0
0
【Javascript】- Prototype 原型

JS Prototype 原型 prototype:原型:如果对象B是建立在对象A的基础上,那么A为B的原型,类似Java里面的父类和子类的关系,B不仅可以使用A定义的属性和方法,还可以进行额外的功能扩展,经常...

ZeroneLove
03/01
0
0
你不知道的JavaScript系列

1、你不知道的JavaScript–Item1 严格模式 2、你不知道的JavaScript–Item2 浮点数精度 3、你不知道的JavaScript–Item3 隐式强制转换 4、你不知道的JavaScript–Item4 基本类型和基本包装类...

大灰狼的小绵羊哥哥
03/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

聊聊Elasticsearch的CircuitBreakerService

序 本文主要研究一下Elasticsearch的CircuitBreakerService CircuitBreakerService elasticsearch-7.0.1/server/src/main/java/org/elasticsearch/indices/breaker/CircuitBreakerService.ja......

go4it
22分钟前
3
0
Spring系列教程六:AOP详细讲解

AOP 概述 什么是 AOP AOP:全称是 Aspect Oriented Programming 即:面向切面编程。 AOP技术是对OOP技术的一种延伸,AOP是面向纵向,OOP是面向横向。简单的说它就是把我们程序重复的代码抽取...

我叫小糖主
35分钟前
12
0
Qt编写数据可视化大屏界面电子看板9-曲线效果

一、前言 为了编写数据可视化大屏界面电子看板系统,为了能够兼容Qt4和嵌入式linux系统,尤其是那种主频很低的,但是老板又需要在这种硬件上(比如树莓派、香橙派、全志H3、imx6)展示这么华...

飞扬青云
56分钟前
3
0
责任链模式

//这篇博客的博主真的不错,解析的都很清晰明了, https://blog.csdn.net/jason0539/article/details/45091639

南桥北木
今天
3
0
Flutter -------- dio网络请求

dio是Flutter中文网开源的一个强大的Dart Http请求库,支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载、超时等... 1.添加依赖# dependencies: dio: 2.1.x #...

切切歆语
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部