js中属性和方法的类型和区别
对象的属性:
私有属性(var)、类属性(静态属性)、对象属性(this)、原型属性(prototype)。
对象的方法:
私有方法(funtion)、类方法(静态方法)、对象方法(this)、原型方法(prototype)。
类方法/静态方法:
类名.方法名 = function(参数1,参数2...参数n)
{
//方法代码
}
对象方法:this指针(公有方法/特权方法)
原型方法:
类名.prototype.方法名 = function(参数1,参数2...参数n)
{
//方法代码
}
1.私有属性 私有方法:只能在这个函数里使用这个属性或方法
function User(name,age){
var name = name;//私有属性
var age = age;
function alertAge(){//私有方法
alert(age);
}
alertAge(age); //弹出26
}
var user = new User('fire子海',26);
私有属性也可以通过闭包获取。
2.静态属性: 公共属性,直接属于某个类,即类属性(js没有类,这里只是指构造函数)
静态属性的定义方式是:
类名.属性名=属性值; 使用 【类名.属性名】 调用
静态方法:只有类才能访问类属性和方法,实例不能访问,只能通过对象本身调用静态方法和静态属性。
静态属性方法是暴露给外部的,挂在类上面的,不属于任何实例。
静态方法无法调用公有属性、公有方法、私有方法、私有属性、特权方法、原型属性
静态方法的定义方式是:
类名.方法名 = function(参数1,参数2...参数n)
{
//方法代码
}
如果两个函数都调用这个静态方法,删除其中一个函数中的静态方法,则对应的另一个函数的静态方法也被删除。
静态方法表现形式:
Eg1:
function User(){}
User.age = 26;//静态属性
User.myname = 'fire子海';
User.getName =function(){//静态方法
return this.myname;
}
console.log(User.getName());//output:fire子海
Eg2://静态类 字面量方式
var user = {
init:function(name,age){ //静态方法
this.name = name;
this.age = age;
},
getName:function(){
return this.name;
}
}
user.init('fire子海',26);
console.log(user.getName());//output:fire子海
Eg3://静态方法不能实例访问
function User(){}
User.age = 26;//静态属性
User.myname = 'fire子海';
User.getName =function(){//静态方法
return this.myname;
}
var user = new User();
console.log(user.getName);//undefined 或者user.getName()返回TypeError: user.getName is not a function
user.supper = '方便面';
user.eat = function(){
return '晚餐只有'+this.supper;
}
user.eat();//晚餐只有方便面 //给new对象加方法所以可以调用
Eg4://构造函数+原型
function User(){
this.myname = 'fire子海';//公有属性
this.age = 26;
this.do = function(){//特权方法
return this.myname+'学习js';
}
}
User.prototype.alertAge = function(){//公共方法,也叫原型方法
alert(this.age);
}
User.prototype.sex = '男';//原型属性
User.getName= function(){//静态方法
return this.myname;
}
User.getAge = function(){
this.alertAge();
}
User.getDo = function(){
return this.do();
}
//console.log(User.getName())//undefined 静态方法不能调用公有属性
//console.log(User.getDo());//TypeError: this.do is not a function //静态方法不能调用特权方法
//console.log(User.getAge())//TypeError: this.alertAge is not a function//静态方法不能调用原型方法和原型属性
3.公有属性:(即实例属性、特权属性,)在对象实例化后调用。
公有方法的调用规则:
公有方法能被外部访问并调用的方法。通过对象本身调用,即对象名。公有方法不能调用私有属性和方法。
公有方法和特权方法并没有什么本质上的区别,原因在于这个概念是来自于使用构造函数创建私有数据的时候定义出来的。
Eg:
var BaseClass = function() {
this.method1 = function(){
alert(' Defined by the "this" in the instance method');
}
};
var instance1 = new BaseClass();
instance1.method1 = function(){
alert(' Defined directly in the instance method');
}
BaseClass.prototype.method1 = function(){
alert(' Defined by the prototype instance method ');
}
instance1.method1();//Defined directly in the instance method
通过运行结果跟踪测试可以看出直接定义在实例上的变量的优先级要高于定义在“this”上的,而定义在“this”上的又高于 prototype定义的变量。即直接定义在实例上的变量会覆盖定义在“this”上和prototype定义的变量,定义在“this”上的会覆盖prototype定义的变量。
直接定义变量>this定义变量>prototype定义变量
Eg://构造函数+原型
function User(){
this.myname = 'fire子海';//公有属性
this.age = 26;
this.do = function(){ //特权方法
return this.myname+'学习js';
}
}
User.eat = function(food){ //静态方法
return '晚餐只有'+food;
}
User.prototype.alertAge = function(){//原型方法 可以调用公有属性/实例属性
alert(this.age);
}
User.prototype.alertDo = function(){
alert(this.do());//原型方法可以调用特权方法
}
User.prototype.alertEat = function(food){
alert(User.eat(food));//只能通过对象本身调用静态方法
//alert(this.ear(food))这样调用将出错:this.eat is not a function
}
var user = new User();
user.alertAge();//alert:26
user.alertDo();//alert:fire子海学习js
user.alertEat('方便面')//alert:晚餐只有方便面
4.原型属性 原型方法
原型属性:类名.prototype.属性名 = 属性值;
原型方法:
类名.prototype.方法名 = function(参数1,参数2...参数n)
{
//方法代码
};
User.prototype.alertAge = function(){//公共方法,也叫原型方法
alert(this.age);
}
User.prototype.sex = '男';//原型属性
当作是类内部的属性使用【this.原型属性】,也可以当成公有静态属性使用【对象.prototype.原型属性】 静态方法不能调用原型属性
原型方法可以实例化对象调用,也可静态方法调用
在实例上不能使用prototype,否则发生编译错误
Eg:
var obj = new Object();
obj.prototype.Property = 1; //Error
obj.prototype.Method = function(){alert(1); }//Error
每个由构造器创建的对象拥有一个指向构造器 prototype 属性值的 隐式引用(implicit reference),这个引用称之为 原型(prototype)。进一步,每个原型可以拥有指向自己原型的 隐式引用(即该原型的原型),如此下去,这就是所谓的 原型链(prototype chain)。在具体的语言实现中,每个对象都有一个 __proto__ 属性来实现对原型的 隐式引用。
有了 原型链,便可以定义一种所谓的 属性隐藏机制,并通过这种机制实现继承。
<script type="text/javascript"> //子类如何重写父类的属性或方法
function AClass() {
this.Property = 1;
this.Method = function() { alert(1); }
}
function AClass2(){
this.Property2 = 2;
this.Method2 = function() {alert(2); }
}
AClass2.prototype = new AClass();
AClass2.prototype.Property = 3;
AClass2.prototype.Method = function() { alert(4); }
var obj = new AClass2();
alert(obj.Property); //3
obj.Method(); //4
</script>
静态方法和实例方法区别:
当然你完全可以把所有的实例方法都写成静态的,将实例作为参数传入即可,一般情况下可能不会出什么问题。
从面向对象的角度上来说,在抉择使用实例化方法或静态方法时,应该根据是否该方法和实例化对象具有逻辑上的相关性,如果是就应该使用实例化对象,反之使用静态方法。
如果从线程安全、性能、兼容性上来看,也是选用实例化方法为宜。
<script type="text/javascript">
var fun = {
//下面是静态方法(第一种方式)
f1: function () {
alert("这是静态方法 f1()");
},
f2:function(callback){
alert("这是静态方法 f2()");
if(callback && (callback instanceof Function)){
callback();//回调方法
}
}
}
var c = function () {
//实例方法
this.f1=function(){
alert("这是实例方法 c.f1()");
}
}
//下面是静态方法(第二种方式)
c.f2 = function () {
alert("这是静态方法 c.f2()");
}
callbackfun = function () {
alert("这是定义好的回调方法!");
}
$(function () {
var node = document.getElementById('test');
node.onclick = function () {
//调用静态方法
fun.f1();
//调用回调方法
fun.f2(function () { alert("这是回调方法!");});
fun.f2(callbackfun);
//调用静态方法
c.f2();
//调用实例方法
var c1 = new c();
c1.f1();
//c1.f2();//这样不能调用会报错
//alert(typeof (fun));//obj
//alert(typeof (fun.f1));//function
//alert(typeof(c.f2)); //function
//var c1 = new c();
//alert(typeof (c));//function
//alert(typeof(c1));//object
//alert(typeof(c1.f1));//function
}
});
</script>
js中属性和方法的类型和区别的更多相关文章
- js中属性类型:数据属性与访问器属性
js中属性类型分为两种:数据属性和访问器属性 在js中,对象都是由名值对构成的,名:就是我们所说的属性名,值就是属性对应的值(基本值.对象.方法). ECMA-262第5版定义了只有内部才用的特性,描 ...
- 手写面试编程题- 数组去重 深拷贝 获取文本节点 设置奇数偶数背景色 JS中检测变量为string类型的方法 第6题闭包 将两个数组合并为一个数组 怎样添加、移除、移动、复制、创建和查找节点? 继承 对一个数组实现随机排序 让元素水平 垂直居中的三种方式 通过jQuery的extend方法实现深拷贝
第1题==>实现数组去重 通过 new Set(数组名) // var arr = [12, 12, 3, 4, 5, 4, 5, 6, 6]; // var newarr1 = new Set ...
- C#中??和?分别是什么意思? 在ASP.NET开发中一些单词的标准缩写 C#SESSION丢失问题的解决办法 在C#中INTERFACE与ABSTRACT CLASS的区别 SQL命令语句小技巧 JQUERY判断CHECKBOX是否选中三种方法 JS中!=、==、!==、===的用法和区别 在对象比较中,对象相等和对象一致分别指的是什么?
C#中??和?分别是什么意思? 在C#中??和?分别是什么意思? 1. 可空类型修饰符(?):引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.例如:string str=null; ...
- js中的tostring()方法
http://blog.sina.com.cn/s/blog_85c1dc100101bxgg.html js中的tostring()方法 (2013-11-12 11:07:43) 转载▼ 标签: ...
- 秒味课堂Angular js笔记------Angular js中的工具方法
Angular js中的工具方法 angular.isArray angular.isDate angular.isDefined angular.isUndefined angular.isFunc ...
- jQuery与JS中的map()方法使用
1.jquery中的map()方法 首先看一个简单的实例: $("p").append( $("input").map(function(){ return $ ...
- JS中通过call方法实现继承
原文:JS中通过call方法实现继承 讲解都写在注释里面了,有不对的地方请拍砖,谢谢! <html xmlns="http://www.w3.org/1999/xhtml"& ...
- JavaScript -- 时光流逝(二):js中数组的方法
JavaScript -- 知识点回顾篇(二):js中数组的方法 1. 数组 (1)定义数组,数组赋值 <script type="text/javascript"> ...
- ASP.NET#使用母版时,如果要使用js中的getElementById()方法取得某个内容页的元素时要注意的问题
当使用母版,要使用js中的getElementById()方法取得某个内容页的元素时,所选取的id并不是母版中内容页的id,而是在设计内容页时设定的id例子:母版页: ...... <head ...
随机推荐
- C++小项目:directx11图形程序(八):particleSysclass
粒子系统类,粒子系统是游戏里细小元素的控制系统,虽然感觉上它对游戏的影响不大,但是其实有了它能给游戏增色不少.粒子系统控制着细小元素的生死,运动,纹理.对它的编写让我知道,游戏里的这一片从天空飘落的雪 ...
- svn出现版本冲突之后的 无效路径
.csproj.FileListAbsolute.txt 找到之后删掉错误的代码
- 用PowerMock mock 由工厂方法产生的对象
有些对象需要mock的对象是由工厂方法产生出来的,而工厂方法一般是静态方法,这时候就需要同时mock工厂方法及对象 被测方法: public class EmployeeServiceFactory ...
- iOS开发学习概述及知识整理
设计师设计出来了一个不错的引导界面,然而当我看到设计稿的时候,我们的app也没几天就要上线了.这个界面模仿了Evernote iOS app的风格. 我以迅雷不及掩耳盗铃之势开始在Xcode上编程,用 ...
- 第一章 JavaScript简史
JavaScript: 一种使网页具有交互能力的程序设计语言. BOM: 浏览器对象模型,指通过JS用来调整Web浏览器的高度.宽度和位置属性的办法. DHTML: 1.利用HTML标记各种元素 ...
- C# 里的if/switch
今天又重新翻了翻C# Step by Step if 语句 if(bool 表达式) { 语句块: } else { 语句块: } switch(day) { case 0: dayName=&quo ...
- 深入理解unslider.js源码
最近用到了一个挺好用的幻灯片插件,叫做unslider.js,就想看看怎么实现幻灯片功能,就看看源码,顺便自己也学习学习.看完之后收获很多,这里和大家分享一下. unslider.js 源码和使用教程 ...
- Outlook查找未读邮件
1.查找新邮件的未读邮件,可以在下图中查找 2.恢复已删除邮件,如果邮件是未读邮件,在上图中是查找不到,只能通过视图去查找 步骤2内容摘自百度
- android.os.NetworkOnMainThreadException异常
在android4.0以前,访问网络的代码可以写在UI主线程,但是在android4.0以上就不能在ui主线程中访问网络了,会出现android.os.NetworkOnMainThreadExcep ...
- 关于ssh调用远程后台命令挂住的解释
目前看到的最详细最全面的解释: http://www.snailbook.com/faq/background-jobs.auto.html