Js面向对象编程

 

1.     什么是面向对象编程？

我也不说不清楚什么是面向对象，反正就那么回事吧。

 

编程有时候是一件很快乐的事，写一些小游戏，用编程的方式玩游戏等等

2.     Js如何定义一个对象

一般变量的定义方法

 

var name = '小明';

var email = 'xiaoming@chinaedu.net';

var website = 'http://chinaedu.net';

写成对象的方式：

 

var xiaoming = {

    name : '小明',

    email : 'xiaoming@chinaedu.net',

    website : 'http://chinaedu.net'

}

   访问属性的方式

 

xiaoming.name

xiaoming['name']

  追加属性

 

xiaoming.sex = '男';

给对象定义方法

 

var xiaoming = {

    name : '小明',

    email : 'xiaoming@chinaedu.net',

    website : 'http://chinaedu.net',

    sayHello : function(){

      alert(this.name + ',你好！');

    }

}

// 再追加一些属性和方法

xiaoming.birthday = '2005-09-23';

xiaoming.eat = function(){

  alert(this.name + ',你妈叫你回家吃饭！');

};

移除属性的方法

 

delete xiaoming.sex

检查对象是否存在某个属性

 

if('sex' in xiaoming){

  alert("true");

}

       js对象的其实没有私有属性的，他的属性都是公有的。

一般对属性名前加_表示私有属性。

 

 

3.     对象的继承

我对继承的简单理解：子对象拥有父对象的属性，并可以对父对象的属性进行覆盖或者扩展。

第一种做法，直接把子对象的属性copy给父对象里，生成新的对象就是继承的效果了。

实现方法

 

function deepCopy(p, c) {

　　var c = c || {};

　　for (var i in p) {

　　　　if (typeof p[i] === 'object') {

　　　　　　c[i] = (p[i].constructor === Array) ? [] : {};

　　　　　　deepCopy(p[i], c[i]);

　　　　} else {

　　　　　　　c[i] = p[i];

　　　　}

　　}

　　return c;

}

4.     js中如何定义一个类？

定义的function就是一个构造方法也就是说是定义了一个类；用这个方法可以new新对象出来。

 

 

function Person(name, age){

  this.name = name;

  this.age = age;

  this.showInfo = function(){

    alert(this.name + this.age + "岁");

  }

}

Person p1 = new Person('小明', 17);

 

5.     类的静态属性及方法

严格来说，ECMAScript 并没有静态作用域。不过，它可以给构造函数提供属性和方法。还记得吗，构造函数只是函数。函数是对象，对象可以有属性和方法。

 

Person.newOrder = 0;

Person.newOrder = function(){

  return Person.newOrder ++;

}

6.     类的继承

对象冒充

 

function Rect(width, height){

    this.width = width;

    this.height = height;

    this.area = function(){return this.width*this.height;};

}

 

function MyRect(width, height, name){

//    this.newMethod = Rect;

//    this.newMethod(width,height);

//    delete this.newMethod;

    Rect.call(this,width,height);// Rect.apply(this, arguments);

    this.name = name;

    this.show = function(){

        alert(this.name+" with area:"+this.area());

    }

}

 

原型链（prototype chaining）

 

function Rect(){

}

Rect.prototype = {

        width:10,

        height : 10,

        area : function(){return this.width*this.height;}

};

 

function MyRect(name){

    this.name = name;

    this.show = function(){

        alert(this.name + " with area:" + this.area());

    }

}

MyRect.prototype = new Rect();

混合型

 

function Rect(width,height){

    this.width = width;

    this.height = height;

}

Rect.prototype = {

        area : function(){return this.width*this.height;}

};

function MyRect(name, width, height){

    Rect.call(this, width, height);

    this.show = function(){

        alert(this.name + " with area:" + this.area());

    }

}

MyRect.prototype = new Rect();

 

7.     可变参数

Js的方法没有重载的概念，但是他的方法参数是可变的。你可传n多参数，只看方法名，方法名相同就认为是一个方法。同名的方法只会覆盖之前的方法。

 

var Rect = function(){};

Rect.prototype = {

    _width : 5,

    _height : 10,

    width : function(width) {

        if (arguments.length > 0) {

            this._width = width;

            return this;

        }

        return this._width;

    },

    height : function(height) {

        if (arguments.length > 0) {

            this._height = height;

            return this;

        }

        return this._height;

    }

}

var r1=new Rect();

r1.width(30).height(45);

alert(r1.width() + "||" + r1.height());

8.     命名空间

定义一个edu.fn的命名空间

 

if (typeof Edu == 'undefined') {

    var Edu = {};

}

if (typeof Edu.fn == 'undefined') {

    Edu.fn = {};

}

(function($) {

    Edu.fn.core = {

           

    }

})(jQuery);

工具方法

 

function namespace(ns) {

        if (!ns)

            return;

        var nsArr = ns.split('.');

        var root = window[nsArr[0]] || (window[nsArr[0]] = {});

        for ( var i = 1; i < nsArr.length; i++) {

            root = root[nsArr[i]] || (root[nsArr[i]] = {});

        }

        return root;

}

namespace("Edu.fn");

    Edu.fn.add = function(a, b) {

        return a + b;

    }

alert(Edu.fn.add(1, 2));

9.         编程常用的模板

针对一些工具类，或者全局只需要存在一个对象的写法

 

;var YourObj = null;

(function($) {

    YourObj = {

            width:10,

            show:function(){}

    }

})(jQuery);

说明：前后加分号只是为了js代码合并压缩的时候保证不会影响别人的代码以及自己的代码。这里使用了js闭包的方式。把对象定义在外边的好处是eclipse的outline可以方便的显示对象的属性和方法。

类模板

 

;

var YourClass = null;

(function($) {

    YourClass = function(options) {

        this.settings = {

            width : 5,

            height : 5

        };// 定义一些默认的属性

        $.extend(true, this.settings, options);

    };

   

    YourClass.prototype = {

        width : 10,

        name : '',

        show : function() {

            alert(this.name + ",width:" + width);

        }

    }

})(jQuery);

10.  常见的一些js用法

简化if语句

a?(语句):(语句)

a=arg||’0’;

11.  js调试

现代浏览器一般都支持console.log(msg),要比alert方便，alert会阻断程序。

 

【参考资料】

http://www.w3school.com.cn/js/pro_js_object_defining.asp

http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html

http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.html

http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance_continued.html

http://coolshell.cn/articles/6441.html

本文为作者原创，转载请注明出处，与你分享我的快乐
http://www.cnblogs.com/weirhp