javascript 面向对象（转）

Posted 2020-07-28 每天进步一点点！

 

 1.使用[]调用对象的属性和方法

function User()
{
    this.age = 21;
    this.sex = "男?";
}
var user = new User();
alert(user["age"]);

 

2.动态添加，修改，删除对象的属性和方法

//定义类
var user = new Object();

//添加属性和方法
user.name = "cary";
user.age = 21;
user.show = function() {
    alert(this.name + "年?龄?为?：?" + this.age);
}
//执行方法
user.show();
//修改属性和方法
user.name = "James";
user.show = function() 
{
    alert(this.name + "你?好?" );
}
//执行方法
user.show();
//删除属性和方法
user.name = "undefined";
user.show = "undefined"
//执行方法
user.show();

 

3.使用大括号{}语法创建无类型对象

var obj = {};
var user =
{
    name: "cary",
    age: 21,
    show: function() {
        alert(this.name + "年?龄?为?：?" + this.age);
    }
}
user.show();
var obj = {}; 等价于
var obj = new Object();

 

4.Prototype原型对象

每个函数function也是一个对象，对应的类类型为“Function”，每个函数对象都有一个子对象prototype，表示函数的原型，所以当我们new
一个类的对象的时候prototype对象的成员都会被实例化为对象的成员。例如：

function class1()
{ }
class1.prototype.show = function() {
    alert("prototye member");
}

var obj = new class1();
obj.show();

 

5.Function函数对象详解

5.1.Function和Date，Array，String等一样都属于javascript的内部对象，这些对象的构造器是由JavaScript本身所定义的。上面说过函数
对象对应的类型是Function，这个和数组的对象是Array一个道理。所以也可以像new Array()一样new Function()来创建一个函数对象，而
函数对象除了使用这种方式还可以使用function关键字来创建。我们之所以不经常使用new Function()的方式来创建函数是因为一个函数一般
会有很多语句，如果我们将这些都传到new Function()的参数中会显得可读性比较差。
var functionName=new Function（p1，p2，...，pn，body）其中p1到pn为参数，body为函数体。

5.2.有名函数和无名函数

有名函数：function funcName（）{}
无名函数：var funcName=function（）{}

他们之间的唯一区别：就是对于有名函数他可以出现在调用之后再定义，而对于无名函数，他必须是在调用之前就已经定义好。

5.3.我们可以利用Function的prototype对象来扩展函数对象，如：

Function.prototype.show = function() {
    alert("扩展方法");
}
function fun()
{ }
fun.show();
fun.show().show();
fun.show().show();


这句的意思是调用fun.show()这个函数对象的show方法。是一个递归的调用，因为fun.show()也是一个函数。

 

6.传递给参数的隐含参数arguments
我们在使用函数时除了传递制定的参数，还创建了一个隐含的参数arguments，如下：

function fun(a, b) {
    for (var i = 0; i < arguments.length; i++) {
        alert(arguments[i]);
    }
}
fun(1,2,3);
arguments还有一个属性是callee，表示对函数对象本身的引用。

 

7.函数的apply，call方法

他们的作用都是将函数绑定到另外一个对象上去运行，两者只是在定义参数上有区别，如下：
Function.prototype.apply(thisArg,argArray);
Function.prototype.call(thisArg[,arg1[,arg2...]]);

下面是例子，obj1的show1方法绑定到obj2后整个函数的执行环境就转移到了obj2，所以this指针也就指向了obj2，所以会显示fun2t：

function fun1() {
    this.name = "fun1";
    this.show1 = function(arg) {
        alert(this.name + arg);
    }
}
function fun2() {
    this.name = "fun2";
    this.show2 = function(arg) {
        alert(this.name + arg);
    }
}

var obj1 = new fun1();
var obj2 = new fun2();

obj1.show1.apply(obj2, ["t"]);
obj1.show1.call(obj2, "t");

 

8.JavaScript中的类实现

8.1.命名空间：我们可以使用如下方式实现命名空间，namespace1 可以看做为命名空间。

var namespace1 = new Object();
namespace1.class1 = function() { 
    //对?象初始化代码
}
var obj1 = new namespace1.class1();

8.2.类成员
上面的我们已经为类添加了成员和方法，除了上面的方法我们还可以使用prototype的方式来给类添加成员，我们怎么做才是最合理的呢，首先
来看下前面的方式：

function User() { 
    //构造函数
}
//成员定义
User.prototype.name = "cary";
User.prototype.show = function() {
    alert(this.name);
}
上面的方式我们每定义一个类成员都要去写User.prototype，我们可以重构为下面的形式：
function User() { 
    //构造函数
}
//成员定义
User.prototype =
{
    name : "cary",
    show = function()
    {
        alert(this.name);
    }
}

 

 

8.3.私有成员

实现类的私有成员主要是利用变量的作用域，我们在构造函数中实现。

function User() { 
    //构造函数中定义私有成员
    var name="cary";
    function show()
    {
        alert(name);
    }
    //共有成员
    this.setname=function()
    {
        name="james";
    }
}

8.4.静态成员

我们可以通过给一个函数对象直接添加成员来实现静态成员，如：

function class1()
{ }
//静态属性和方法
class1.staticpr = "staticpr";
class1.staticmet = function()
{ }
//调用
class1.staticmet();

我们可以通过给函数对象所在的类Function添加成员来实现给所有的函数对象默认添加静态成员，如下：

Function.prototype.staticmet = function()
{ }
function class1()
{ }
//调用
class1.staticmet();

 

9.实现反射机制

使用for(...in...)方式，for中的var p来存储User对象的属性和方法，我们来判断是属性还是方法，如下：

function User() { 
    //构造函数
}
//成员定义
User.prototype =
{
    name : "cary",
    show : function()
    {
        alert(this.name+"Hello");
    }
}
var u=new User();
for (var p in u) {   
    if(typeof(u[p])=="function") {       
        u[p]();
    }
    else {        
        alert(u[p]);
    }
}