首先是在访问上的区别,当访问实例对象的某个属性但它本身没有时,它就会到原型中去查找,但不会去查找静态属性。

  1. // 实例对象不会去查找静态属性
  2. function Foo(){}
  3. Foo.a = 1;
  4. var foo = new Foo();
  5. foo.a // undefined
  6. // 当实例对象没有某个属性时,会尝试去原型中查找
  7. function Foo(){}
  8. Foo.prototype.a = 1;
  9. var foo = new Foo();
  10. foo.a // 1

静态方法中的this指向调用它的对象,比如在下面代码中指向的就是调用它的Foo,原型方法中的this指向实例对象

  1. function Foo(){}
  2. Foo.fn = function(){
  3. console.log(this);
  4. };
  5. Foo.prototype.fn = function(){
  6. console.log(this);
  7. };
  8. var foo = new Foo();
  9. foo.fn(); // Foo {}
  10. Foo.fn(); // function Foo(){}

静态属性和原型属性的区别就在于this的指向以及查找规则上,但this的指向问题并不是最重要的,拿实现链式调用来说

  1. // 通过原型实现链式调用
  2. function Foo(){}
  3. Foo.prototype.a = function(){
  4. console.log('a');
  5. return this;
  6. };
  7. Foo.prototype.b = function(){
  8. console.log('b');
  9. return this;
  10. };
  11. var foo = new Foo();
  12. foo.a().b(); // a b
  13. // 通过静态方法实现链式调用
  14. function Foo(){}
  15. Foo.a = function(){
  16. console.log('a');
  17. return this;
  18. };
  19. Foo.b = function(){
  20. console.log('b');
  21. return this;
  22. };
  23. Foo.a().b(); // a b

最大的区别还是在查找规则上,在原型上添加属性可以当做默认属性来使用

  1. function Foo(){}
  2. Foo.prototype.a = 1;
  3. var foo = new Foo(),
  4. foo2 = new Foo();
  5. foo2.a = 2;
  6. foo.a // 1
  7. foo2.a // 2

每个实例对象都可以拥有自己的属性和方法,在没有设置的情况下才会去尝试使用prototype上的属性和方法,而静态方法是无法实现这种效果的。

对JavaScript中的静态属性和原型属性的理解的更多相关文章

  1. JavaScript面向对象(二)——成员属性、静态属性、原型属性与JS原型链

      前  言 JRedu 上一篇博客中,我们介绍了JS中的面向对象,并详细的解释了this的指向问题.本篇博客,我们继续来学习JS的面向对象.来深入理解一下JavaScript OOP中的成员属性/方 ...

  2. javascript中元素的scrollLeft和scrollTop属性说明

    再说意义之前,前说一下这两个属性的适用范围: 注意:这两个属性只能用于元素设置了overflow的css样式中.否者这两个属性没有任何意义.且overflow的值不能为visible,但可以为hidd ...

  3. JavaScript 中 Object ,Prototype 相关的属性和方法

    span { font-family: 'Consolas'; font-size: 10pt; color: #ffffff; } .sc0 { } .sc2 { color: #c0c0c0; } ...

  4. js实例属性和原型属性

    <!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <t ...

  5. 关于Javascript中通过实例对象修改原型对象属性值的问题

    Javascript中的数据值有两大类:基本类型的数据值和引用类型的数据值. 基本类型的数据值有5种:null.undefined.number.boolean和string. 引用类型的数据值往大的 ...

  6. JavaScript中的数据属性和访问器属性

    在学习JavaScript原型(prototype)和原型链(prototype chain)知识的时候,发现数据属性和访问器属性的重要性,通过不断的查找相关知识,浅显理解如下,若有差错,希望不吝赐教 ...

  7. 关于JavaScript中实现继承,及prototype属性

    感谢Mozilla 让我弄懂继承. JavaScript有八种基本类型,函数属于object.所以所有函数都继承自object.//扩展:对象,基本上 JavaScript 里的任何东西都是对象,而且 ...

  8. 【JavaScript】变量定义提升、this指针指向、运算符优先级、原型、继承、全局变量污染、对象属性及原型属性优先级

    参考资料http://caibaojian.com/toutiao/5446 1.所有变量声明(var)或者声明函数都会被提升到当前函数顶部 关于函数表达式,js会将代码拆分为两行代码分别执行.这里需 ...

  9. javascript中数组常用的方法和属性

    前言 在javascript中,数组是一种非常重要的数据类型,我们时常会和它打交道,最近在开发项目中频繁的使用到数组,但是自己对数组的众多方法已经是非常模糊了,为了方便自己以后能够更好的使用数组中的属 ...

随机推荐

  1. Linux的ls命令在Windows中的应用

    Linux的ls命令在Windows中的应用 注:ls是Linux中的命令.其作用是列出当前目录下的文件与文件夹.效果等同于Wndows中的dir指令. 如下图 下面是详细步骤 步骤一.在桌面新建一个 ...

  2. Qt布局操作

    Qt界面布局是用来界面上控件排序的,例如对齐.自适应分辨率等都要用到布局. Qt界面布局跟Visual Studio系列完全不一样,VS系列的操作很简单,一般情况下,很快就能入手了,但比较死板(特别是 ...

  3. Spark算子--join

      join--Transformation类算子 代码示例 result  

  4. thinkphp5.0 文章详情页 上一篇 下一篇

    // 上一篇下一篇(同一个分类下,先确定该分类的pid) public function frontAfter() { $param=$this->param; $front=Db::name( ...

  5. sublime如何实现函数折叠

    Ctrl+Shift+[ 折叠代码 Ctrl+Shift+] 展开代码 Ctrl+KT 折叠属性 Ctrl+K0 展开所有

  6. dedecms利用memberlist标签调用自定义会员模型的会员信息

    [摘要]本文讲一下dedecms如何利用memberlist标签调用自定义会员模型的会员信息. dedecms利用memberlist标签调用自定义会员模型的会员信息,这个问题找了很久,官方论坛提问过 ...

  7. ffmpeg批量实现视频转码命令行

    ffmpeg实现视频转码命令行,result需要提前建好作为保存转码后的视频路径: ffmpeg -i .mp4 -vcodec h264 "result\1.mp4" 当有大量视 ...

  8. 【Java框架型项目从入门到装逼】第九节 - 数据库建表和CRUD操作

    1.新建学生表 这节课我们来把和数据库以及jdbc相关的内容完成,首先,进行数据库建表.数据库呢,我们采用MySQL数据库,我们可以通过navcat之类的管理工具来轻松建表. 首先,我们得建一个数据库 ...

  9. Java泛型范例

    class Point<T>{ // 此处可以随便写标识符号,T是type的简称 private T var ; // var的类型由T指定,即:由外部指定 public T getVar ...

  10. Java接口和抽象类的理解

    接口和抽象类的相同之处就是 都会有抽象方法 抽象方法就是一个没有方法体 等待继承的子类完成的方法 然而接口比较严格 它的方法必须是抽象方法且是公开的 抽象类 可以有自己的属性 和 实体方法 首相用面向 ...