对JavaScript中的静态属性和原型属性的理解
首先是在访问上的区别,当访问实例对象的某个属性但它本身没有时,它就会到原型中去查找,但不会去查找静态属性。
// 实例对象不会去查找静态属性
function Foo(){}
Foo.a = 1;
var foo = new Foo();
foo.a // undefined
// 当实例对象没有某个属性时,会尝试去原型中查找
function Foo(){}
Foo.prototype.a = 1;
var foo = new Foo();
foo.a // 1
静态方法中的this指向调用它的对象,比如在下面代码中指向的就是调用它的Foo,原型方法中的this指向实例对象
function Foo(){}
Foo.fn = function(){
console.log(this);
};
Foo.prototype.fn = function(){
console.log(this);
};
var foo = new Foo();
foo.fn(); // Foo {}
Foo.fn(); // function Foo(){}
静态属性和原型属性的区别就在于this的指向以及查找规则上,但this的指向问题并不是最重要的,拿实现链式调用来说
// 通过原型实现链式调用
function Foo(){}
Foo.prototype.a = function(){
console.log('a');
return this;
};
Foo.prototype.b = function(){
console.log('b');
return this;
};
var foo = new Foo();
foo.a().b(); // a b
// 通过静态方法实现链式调用
function Foo(){}
Foo.a = function(){
console.log('a');
return this;
};
Foo.b = function(){
console.log('b');
return this;
};
Foo.a().b(); // a b
最大的区别还是在查找规则上,在原型上添加属性可以当做默认属性来使用
function Foo(){}
Foo.prototype.a = 1;
var foo = new Foo(),
foo2 = new Foo();
foo2.a = 2;
foo.a // 1
foo2.a // 2
每个实例对象都可以拥有自己的属性和方法,在没有设置的情况下才会去尝试使用prototype上的属性和方法,而静态方法是无法实现这种效果的。
对JavaScript中的静态属性和原型属性的理解的更多相关文章
- JavaScript面向对象(二)——成员属性、静态属性、原型属性与JS原型链
前 言 JRedu 上一篇博客中,我们介绍了JS中的面向对象,并详细的解释了this的指向问题.本篇博客,我们继续来学习JS的面向对象.来深入理解一下JavaScript OOP中的成员属性/方 ...
- javascript中元素的scrollLeft和scrollTop属性说明
再说意义之前,前说一下这两个属性的适用范围: 注意:这两个属性只能用于元素设置了overflow的css样式中.否者这两个属性没有任何意义.且overflow的值不能为visible,但可以为hidd ...
- JavaScript 中 Object ,Prototype 相关的属性和方法
span { font-family: 'Consolas'; font-size: 10pt; color: #ffffff; } .sc0 { } .sc2 { color: #c0c0c0; } ...
- js实例属性和原型属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...
- 关于Javascript中通过实例对象修改原型对象属性值的问题
Javascript中的数据值有两大类:基本类型的数据值和引用类型的数据值. 基本类型的数据值有5种:null.undefined.number.boolean和string. 引用类型的数据值往大的 ...
- JavaScript中的数据属性和访问器属性
在学习JavaScript原型(prototype)和原型链(prototype chain)知识的时候,发现数据属性和访问器属性的重要性,通过不断的查找相关知识,浅显理解如下,若有差错,希望不吝赐教 ...
- 关于JavaScript中实现继承,及prototype属性
感谢Mozilla 让我弄懂继承. JavaScript有八种基本类型,函数属于object.所以所有函数都继承自object.//扩展:对象,基本上 JavaScript 里的任何东西都是对象,而且 ...
- 【JavaScript】变量定义提升、this指针指向、运算符优先级、原型、继承、全局变量污染、对象属性及原型属性优先级
参考资料http://caibaojian.com/toutiao/5446 1.所有变量声明(var)或者声明函数都会被提升到当前函数顶部 关于函数表达式,js会将代码拆分为两行代码分别执行.这里需 ...
- javascript中数组常用的方法和属性
前言 在javascript中,数组是一种非常重要的数据类型,我们时常会和它打交道,最近在开发项目中频繁的使用到数组,但是自己对数组的众多方法已经是非常模糊了,为了方便自己以后能够更好的使用数组中的属 ...
随机推荐
- Linux的ls命令在Windows中的应用
Linux的ls命令在Windows中的应用 注:ls是Linux中的命令.其作用是列出当前目录下的文件与文件夹.效果等同于Wndows中的dir指令. 如下图 下面是详细步骤 步骤一.在桌面新建一个 ...
- Qt布局操作
Qt界面布局是用来界面上控件排序的,例如对齐.自适应分辨率等都要用到布局. Qt界面布局跟Visual Studio系列完全不一样,VS系列的操作很简单,一般情况下,很快就能入手了,但比较死板(特别是 ...
- Spark算子--join
join--Transformation类算子 代码示例 result
- thinkphp5.0 文章详情页 上一篇 下一篇
// 上一篇下一篇(同一个分类下,先确定该分类的pid) public function frontAfter() { $param=$this->param; $front=Db::name( ...
- sublime如何实现函数折叠
Ctrl+Shift+[ 折叠代码 Ctrl+Shift+] 展开代码 Ctrl+KT 折叠属性 Ctrl+K0 展开所有
- dedecms利用memberlist标签调用自定义会员模型的会员信息
[摘要]本文讲一下dedecms如何利用memberlist标签调用自定义会员模型的会员信息. dedecms利用memberlist标签调用自定义会员模型的会员信息,这个问题找了很久,官方论坛提问过 ...
- ffmpeg批量实现视频转码命令行
ffmpeg实现视频转码命令行,result需要提前建好作为保存转码后的视频路径: ffmpeg -i .mp4 -vcodec h264 "result\1.mp4" 当有大量视 ...
- 【Java框架型项目从入门到装逼】第九节 - 数据库建表和CRUD操作
1.新建学生表 这节课我们来把和数据库以及jdbc相关的内容完成,首先,进行数据库建表.数据库呢,我们采用MySQL数据库,我们可以通过navcat之类的管理工具来轻松建表. 首先,我们得建一个数据库 ...
- Java泛型范例
class Point<T>{ // 此处可以随便写标识符号,T是type的简称 private T var ; // var的类型由T指定,即:由外部指定 public T getVar ...
- Java接口和抽象类的理解
接口和抽象类的相同之处就是 都会有抽象方法 抽象方法就是一个没有方法体 等待继承的子类完成的方法 然而接口比较严格 它的方法必须是抽象方法且是公开的 抽象类 可以有自己的属性 和 实体方法 首相用面向 ...