对象的属性
私有属性(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中属性和方法的类型和区别的更多相关文章

  1. js中属性类型:数据属性与访问器属性

    js中属性类型分为两种:数据属性和访问器属性 在js中,对象都是由名值对构成的,名:就是我们所说的属性名,值就是属性对应的值(基本值.对象.方法). ECMA-262第5版定义了只有内部才用的特性,描 ...

  2. 手写面试编程题- 数组去重 深拷贝 获取文本节点 设置奇数偶数背景色 JS中检测变量为string类型的方法 第6题闭包 将两个数组合并为一个数组 怎样添加、移除、移动、复制、创建和查找节点? 继承 对一个数组实现随机排序 让元素水平 垂直居中的三种方式 通过jQuery的extend方法实现深拷贝

    第1题==>实现数组去重 通过 new Set(数组名) // var arr = [12, 12, 3, 4, 5, 4, 5, 6, 6]; // var newarr1 = new Set ...

  3. C#中??和?分别是什么意思? 在ASP.NET开发中一些单词的标准缩写 C#SESSION丢失问题的解决办法 在C#中INTERFACE与ABSTRACT CLASS的区别 SQL命令语句小技巧 JQUERY判断CHECKBOX是否选中三种方法 JS中!=、==、!==、===的用法和区别 在对象比较中,对象相等和对象一致分别指的是什么?

    C#中??和?分别是什么意思? 在C#中??和?分别是什么意思? 1. 可空类型修饰符(?):引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.例如:string str=null; ...

  4. js中的tostring()方法

    http://blog.sina.com.cn/s/blog_85c1dc100101bxgg.html js中的tostring()方法 (2013-11-12 11:07:43) 转载▼ 标签: ...

  5. 秒味课堂Angular js笔记------Angular js中的工具方法

    Angular js中的工具方法 angular.isArray angular.isDate angular.isDefined angular.isUndefined angular.isFunc ...

  6. jQuery与JS中的map()方法使用

    1.jquery中的map()方法 首先看一个简单的实例: $("p").append( $("input").map(function(){ return $ ...

  7. JS中通过call方法实现继承

    原文:JS中通过call方法实现继承 讲解都写在注释里面了,有不对的地方请拍砖,谢谢! <html xmlns="http://www.w3.org/1999/xhtml"& ...

  8. JavaScript -- 时光流逝(二):js中数组的方法

    JavaScript -- 知识点回顾篇(二):js中数组的方法 1. 数组 (1)定义数组,数组赋值 <script type="text/javascript"> ...

  9. ASP.NET#使用母版时,如果要使用js中的getElementById()方法取得某个内容页的元素时要注意的问题

    当使用母版,要使用js中的getElementById()方法取得某个内容页的元素时,所选取的id并不是母版中内容页的id,而是在设计内容页时设定的id例子:母版页: ...... <head ...

随机推荐

  1. Web开发中最致命的8个小错误

    错误1:表单的label标签跟表单字段没有关联 利用“for”属性允许用户单击label也可以选中表单中的内容.这可以扩大复选框和单选框的点击区域,非常实用. 错误2:logo图片没有链接到主页 点击 ...

  2. iOS -- 处理推送消息

    简介 很多应用都会实现推送功能,我们可以集成第三方框架实现推送功能,比如: JPush推送:https://www.jpush.cn 个推:http://www.getui.com 下面来说说收到推送 ...

  3. Android WebView useragent

    今天介绍一下Android WebView UserAgent, User-Agent(简称UA)是HTTP请求头部用来标识客户端信息的字符串, 包括操作系统, 浏览器等信息.为了建立手机客户端的信息 ...

  4. 有关javascript的性能优化(合理的管理内存)

    使用具备垃圾收集机制的语言编写程序,开发人员一般不必操心内存管理的问题.但是,Javascript在进行内存管理及收集时面临的问题是有点与众不同.其中最主要的一个问题是分配给Web浏览器的可用内存数量 ...

  5. odi 12.2.1中访问excel文件

    由于在odi 12.2.1中,必须使用jdk1.8,而jdk1.8中jdbc-odbc bridge已经不再支持,因此,可以使用Progress DataDirect SequeLink来充当jdbc ...

  6. mvc导出excel 之 新

    前段时间做的mvc导出excel 老大说要进行优化,我原来导出是用npoi插件进行导出,格式是将数据放入到datatable中,然后进行导出. 说要优化的时候就想着将datatable数据导出格式改为 ...

  7. popen使用不当引起产生僵尸进程

    FILE * popen(const char * command, const char * type)popen函数会通过fork产生子进程,然后从子进程中调用/bin/sh -c执行参数comm ...

  8. 【笔记】ListView的使用

    1.0 ListView三要素 1.0.1  创建基本步骤 1.在布局文件中创建一个ListView组件,并在Activity中声明这个组件. 2.在Activity中,创建一个合适的Adapter. ...

  9. jQuery从无知到无所不知

    说明: 本文以读书笔记的方式整理jQuery的重要知识点,言简意赅,一语中的,删繁就简,引人入胜. 本文先对jQuery强大的功能作一系统的介绍,再详细整理jQuery的选择器.过滤器.DOM操作.事 ...

  10. [转]使用Scrapy建立一个网站抓取器

    英文原文:Build a Website Crawler based upon Scrapy 标签: Scrapy Python 209人收藏此文章, 我要收藏renwofei423 推荐于 11个月 ...