`

JavaScript面向对象基础

阅读更多

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]);
    }
}

分享到:
评论

相关推荐

    Javascript面向对象基础

    以下是对"Javascript面向对象基础"的详细解释: 1. **对象和属性**:在JavaScript中,对象是键值对的集合,可以通过花括号{}创建。例如,`let person = {name: "张三", age: 30}`定义了一个包含姓名和年龄属性的...

    Javascript面向对象基础.rar

    在这个“JavaScript面向对象基础”的资料中,我们将会探讨JavaScript中的类、对象、封装、继承以及多态等关键概念。 1. **对象与对象字面量** 在JavaScript中,对象是由键值对组成的无序集合,可以使用对象字面量...

    《JavaScript内核系列》和《JavaScript面向对象基础》

    《JavaScript内核系列》和《JavaScript面向对象基础》这两本书是深入理解JavaScript编程的重要资源。JavaScript,作为一种广泛应用于Web开发的脚本语言,其内核和面向对象特性是开发者必须掌握的基础知识。以下是对...

    JavaScript面向对象基础PPT

    JavaScript面向对象基础PPT,讲述了何谓面向对象、面向对象特点、组成及写法、工厂模式、原型以及如何将普通面向过程的代码转换为面向对象的基本原则

    javascript 面向对象基础

    在本文中,我们将深入探讨 JavaScript 的面向对象基础,主要包括类的定义、实例化以及对象属性和方法的引用。 首先,让我们了解如何在 JavaScript 中定义一个类。在 JavaScript 中,类通常通过函数来实现。例如,...

    JavaScript面向对象基础.ppt

    面向对象编程的基础包括类、对象、继承和多态等概念。类是对象的模板或蓝图,定义了一组属性(数据成员)和方法(函数)。对象则是类的实例,具备类所定义的属性和行为。JavaScript虽然没有传统的类定义,但可以通过...

    JavaScript面向对象编程指南.pdf

    JavaScript作为一门浏览器语言的核心思想;面向对象编程的基础知识及其在... 《JavaScript面向对象编程指南》着重介绍JavaScript在面向对象方面的特性,展示如何构建强健的、可维护的、功能强大的应用程序及程序库

    JavaScript面向对象编程指南

    《JavaScript面向对象编程指南》内容包括:JavaScript作为一门浏览器语言的核心思想;面向对象编程的基础知识及其在JavaScript中的运用;数据类型、操作符以及流程控制语句;函数、闭包、对象和原型等概念,以代码...

    面向对象JavaScript精要(英文原版pdf)

    本书全面覆盖了面向对象编程的基础理论,并结合JavaScript的具体实现进行讲解。 - **第一章:JavaScript简介**:介绍JavaScript的发展历程、特点及其与Web浏览器的关系。 - **第二章:面向对象编程简介**:解释OOP...

    JAVASCRIPT 面向对象编程精要

    本文介绍了JavaScript面向对象编程的基本概念和技术细节,包括变量和对象的基础用法、函数的作用以及如何通过封装和继承来构建复杂的对象层次结构。JavaScript的独特之处在于它的灵活性和动态性,这使得它成为了一种...

    javascript面向对象编程.pdf

    编写良好的面向对象基础代码之后,建立一个强大的代码测试环境是必要的。这有助于发现和修复代码中的缺陷,提高软件的稳定性和可靠性。在本书中,作者将介绍不同的测试工具,包括调试工具如Firefox的Firebug插件,它...

    JavaScript面向对象编程指南(第2版).rar

    JavaScript是一种广泛...通过深入学习这本《JavaScript面向对象编程指南(第2版)》,开发者不仅能掌握JavaScript的面向对象编程基础,还能了解到实际项目中如何有效地运用这些知识,提升编程技巧和解决问题的能力。

    JavaScript面向对象精要(英文版)

    《JavaScript面向对象精要》这本书不仅介绍了JavaScript面向对象的基础概念,还深入探讨了其实现机制及其在实际开发中的应用。对于希望提高自己JavaScript技能水平的开发者来说,本书是一本不可多得的好书。通过学习...

    javascript面向对象编程(中文).pdf

    ### JavaScript面向对象编程知识点概述 #### 一、现代JavaScript编程概览 - **JavaScript的演进**:自诞生以来,JavaScript经历了从一个简单的脚本语言到现今被广泛应用于构建复杂应用的强大编程语言的过程。它的...

Global site tag (gtag.js) - Google Analytics