Javascript OOP思想概述

1.如何创建对象

1.1 new

用new进行创建对象:

  • var user = new Object();  
  • user.age = 12;//同时为对象添加属性  
  • user.name = ‘aseoe’;  

 

var user = new Object();user.age = 12;//同时为对象添加属性user.name = ‘aseoe’;

1.2 {}

用{}创建对象,如:

  • var user = {  
  •        ‘name’:’aseoe,  
  •            ‘age’:12  
  • }  

 

var user = {           ‘name’:’aseoe,           ‘age’:12}

 

这里同时候为user添加了两个属性分别为:name,age

在以上代码稍加改造,你还可以为一个对象添加一个方法,如:

 

  • var user = {  
  •     ‘name’:’aseoe’,  
  •     ‘age’:12  
  •     ‘say’:function(){  
  •         alert(this.name);//this代表当前对象  
  •   }  
  • }  

 

var user = {    ‘name’:’aseoe’,    ‘age’:12    ‘say’:function(){                alert(this.name);//this代表当前对象  }}

2.类和构造函数
2.1如何定义

在javascript中,所有的变量和方法都是对象,都可以用做参数相互传递的。

看以下这个方法:

  • function User(name,age){  
  •         this.name = name;  
  •         this.age = age;  
  •         this.say = function(){  
  •              alert(this.name+’ say hello!!’);  
  •                 }  
  • }  

function User(name,age){                this.name = name;                this.age = age;                this.say = function(){                     alert(this.name+’ say hello!!’);                }}

此时你可以这样理解,User你可以看成一个类的名字,而User()就是这个类得构造方法,这点有点类似于java中的类和构造方法必须同名,在new的时候调用其构造方法,一些初始化操作,可以放在你的构造方法内,这里我们用于初始化name和age属性的值,以下创建User对象的代码:

  • var user = new User(‘aseoe’ ,22);  
  • user.say();//ajun say hello!!  

 

var user = new User(‘aseoe’ ,22);user.say();//ajun say hello!!

在这里解释以下this

当我们在new对象的时候,实际会调用一个被叫做的call(),将当前对象做为参数传递进行,赋值给this,所以this就是指当前引用对象

3.原型
3.1 prototype

在 JavaScript 中,每个方法都有名为“prototype”的属性,用于引用原型对象,看如下代码:

  • function User(){  
  •         this.name = ‘aseoe’;  
  •         this.age = 22;  
  •         this.say = function(){  
  •             alert(this.name+’ say hello!!’);  
  •               }  
  • }  

 

function User(){                this.name = ‘aseoe’;                this.age = 22;                this.say = function(){                        alert(this.name+’ say hello!!’);              }}

这个User就会有prototype的属性,引用的时候就可以这样 User.prototype 就可以了,当你new User对象的时候,这个对象就会继承来自User. prototype的所有的属性,而User. prototype又继承自Object.prototype的所有的属性,所以你才可以在你对象上调用toString()等方法,其实他都是Object. Prototype的属性,只是被你的对象继承过来了而已,在这里你可以理解为java的类得继承,子类继承父类。

有prototype的概念,我们就可以通过prototype给User添加方法、属性了,这样以后每个user对象都共享方法和属性,而不是每个对象都会有他们的副本了。

  • function User(){  
  •         this.name = ‘aseoe’;  
  •         this.age = 22;  
  • }  
  • User. prototype. say = function(){  
  •         alert(this.name+’ say hello!!’);  
  • }  
  • var user = new User();  
  • user.say();  
  • var user2 = new User();  
  • user2.say();  

 

function User(){                this.name = ‘aseoe;                this.age = 24;}User. prototype. say = function(){                alert(this.name+’ say hello!!’);}var user = new User();user.say();var user2 = new User();user2.say();这样我们在new 完一个User对象的时候,调用完这个方法的时候,他还可以供其他方法继续使用。

3.2原型链

每个 JavaScript对象都继承一个原型链,而所有原型都终止于 Object.prototype。注意,迄今为止您看到的这种继承是活动对象之间的继承。它不同于继承的常见概念,后者是指在声明类时类之间的发生的继承。因此,JavaScript 继承动态性更强。它使用简单算法实现这一点,如下所示:当您尝试访问对象的属性/方法时,JavaScript 将检查该属性/方法是否是在该对象中定义的。如果不是,则检查对象的原型。如果还不是,则检查该对象的原型的原型,如此继续,一直检查到 Object.prototype。

JavaScript 动态地解析属性访问和方法调用的方式产生了一些特殊效果:

   @ 继承原型对象的对象上可以立即呈现对原型所做的更改,即使是在创建这些对象之后。

   @ 如果在对象中定义了属性/方法 X,则该对象的原型中将隐藏同名的属性/方法。例如,

     通过在 User.prototype 中定义 toString 方法,可以改写Object.prototype 的 toString 方法。

   @ 更改只沿一个方向传递,即从原型到它的派生对象,但不能沿相反方向传递。

例子:

  • function User(){  
  •         this.name = ‘aseoe’;  
  •         this.age = 22;  
  • }  
  • User. prototype. toString = function(){  
  •         alert(this.name+’ say hello!!’);  
  • }  
  • var user = new User();  
  • user. toString ();  

function User(){                this.name = ‘aseoe’;                this.age = 22;}User. prototype. toString = function(){                alert(this.name+’ say hello!!’);}var user = new User();user. toString ();

此时Object.prototype的toString会被覆盖掉。这样就不会调用Object.prototype的toString了,也就不会输出[Object Object],而输出的是ajun say hello!!了

4.静态属性和方法

有的时候 ,你想不想就像java中那样,通过类直接来操作你的属性和方法,其实在java中这些都是静态属性啦,直接通过类名来引用,在JavaScript中也是可以做的,请看下面的代码:

  • function User(){}  
  • User.age = 12;  
  • User.name = ‘aseoe’;  
  • User.say = function(){  
  •         return ‘aseoe’;  
  • }  
  • alert(User.say());  

 

function User(){}User.age = 12;User.name = ‘aseoe’;User.say = function(){                return ‘aseoe’;}alert(User.say());

之后就可以用方法名字直接引用你的方法或者属性了,而不用在new一次对象了。

5.私有属性

正常情况下,无法从函数以外访问函数内的本地变量。函数退出之后,由于各种实际原因,该本地变量将永远消失。但是,如果该本地变量被内部函数的闭包捕获,它就会生存下来。这一事实是模拟 JavaScript 私有属性的关键,如:

 

  • function User(name,age){  
  •     this.setName = function(newName){  
  •          name = newName;//name相当于setName的name属性  
  •     };  
  •     this.getName = function(){  
  •         return name;  
  •     }  
  •     this.getAge = function(){   
  •         return age;   
  •     };  
  •     this.setAge = function(newAge){   
  •         age = newAge;   
  •     };  
  • }  
  • var user = new User(‘aseoe’,22);  
  • alert(user.getName)//ajun  
  • user.setName(‘lisi’,12);  
  • var newName = user.getName();  
  • alert(newName);//lisi  

function User(name,age){        this.setName = function(newName){                 name = newName;//name相当于setName的name属性        };        this.getName = function(){                return name;        }        this.getAge = function(){                 return age;         };    this.setAge = function(newAge){                 age = newAge;         };}var user = new User(‘aseoe’,22);alert(user.getName)//aseoeuser.setName(‘lisi’,12);var newName = user.getName();alert(newName);

或者这样也是可以模拟似有属性的,因为name超出其作用域,是不可以被访问的

  • function User (name, age) {  
  •     var name;  
  •     this.getName = function() { return name; };  
  • this.setName = function(newName) {  
  • name =  newName;   
  • };  
  • }  
  • var user = new User (‘aseoe’,12);  
  • user. setName(‘qq’);  
  • alert(p.getName());  

 

function User (name, age) {    var name;    this.getName = function() { return name; };this.setName = function(newName) { name =  newName; };}var user = new User (‘aseoe’,12);user. setName(‘qq’);alert(p.getName());

注意:你设定的私有属性,是不能被这个方法内的其他公共方法访问的(指的是共享的方法,通过User.prototype定义的方法),这一点和java是不类似的

只能通过在其闭包内拥有这些私有成员的方法来访问私有成员

如:下面的代码 ,是不可以工作的

 

  • User.prototype.somePublicMethod= function() {  
  •     alert(this.getName());  
  • }  

User.prototype.somePublicMethod= function() {    alert(this.getName());}

5.命名空间

这里所说的命名空间就相当于我们在java中使用包的概念,这样可以防止方法名冲突,代码如下:

  • //命名空间  
  • var ASEOE = {};  
  • ASEOE.Examples = {};  
  • ASEOE.Examples.User=function(){  
  •     this.setName = function(newName){  
  •          name = newName;  
  •     };  
  •     this.getName = function(){  
  •         return name;  
  •     }  
  •     this.getAge = function(){   
  •         return age;   
  •     };  
  •     this.setAge = function(newAge){   
  •         age = newAge;   
  •     };  
  • }  
  • var user = new ASEOE.Examples.User();  
  • user.setName(‘aseoe’);  
  • alert(user.getName());  

本文链接



You must enable javascript to see captcha here!

Copyright © All Rights Reserved · Green Hope Theme by Sivan & schiy · Proudly powered by WordPress

无觅相关文章插件,快速提升流量