首页 web前端 js教程 JavaScript对象学习笔记

JavaScript对象学习笔记

Dec 20, 2016 pm 03:29 PM
javascript 对象

对象是组成JavaScript的基本单元,在JS中,一切东东其实都是对象,而且功能非常强大,它不仅风格独特,功能也与众不同。

一、引用(reference)

引用的概念是JS的基础之一,它是指向对象实际位置的指针。见下面的例子:

var items = new Array("abc","def","hig");
//创建此数组的引用
var Ref = items;
items.push("klm");
alert(Ref.lenth);  //此处应该显示4
登录后复制

但是,如果是字符串,就会出现不同的情况,见下面的代码:

var items = "abc";
var Ref = items;
items += "def";  //这里创建了一个新对象,而非原对象的修改。
登录后复制

现在Ref与items指向的是不同的对象。

二、函数重载

JS的每个函数都有一个变量argument,它是接收所有参数的伪数组。为什么是“伪”,因为你不能修改它,但它有length属性。我们看看下面的例子:

function  myFun(num1,num2)
{
    if(arguments.length == 2) { alert("我有两个参数"); }
    if(arguments.length == 1) { alert("我有一个参数"); }
}
登录后复制

接下来,我们调用函数myFun("abc"); myFun("abc","def");看看有什么不同,最重要的是,这本来就是函数重载嘛:)

三、作用域

在JavaScript里,作用域是由函数划分的,而不是由块(while,if,for)划分的。这样在理解有些代码时,可能会带来一些麻烦。为了对细节进行说明,我们看下面的例子:

var temp="oldTemp"    //全局变量
if(true)
{
    var temp = "newTemp"   //这里还在全局中
}
alert(temp == "newTemp")   //发现相等
登录后复制

但是如果我们在一个函数中声明并改变temp变量,效果则完全不同,见例子:

var temp="oldTemp" ;   //全局变量
function test()
{
    var temp = "newTemp";
}
test();
alert(temp == "newTemp") ;  //发现不相等
登录后复制

在JS中,全局变量是window对象的一个属性,在上面的例子中,全局变量temp == window.temp,还有需要注意的是:如果某一个变量缺乏声明,就自动变为全局变量,虽然很可能它只在某个函数中使用。

四、闭包

闭包意味着内层的函数可以引用包围它的函数内的变量,即使外层函数已经终止。见下面的例子:

function AddNum(num1)
{
    return function (num2)
    {
        return num1 + num2;
    }
}
var temp = AddNum(4);          //传入第一个参数,然后AddNum消失
var temp2 = temp(5);           //传入第二个参数,然后相加,返回9
alert(temp2);
登录后复制

这个例子很好体现了闭包的概念,是一种特殊情况,平时当然不这么用。

五、上下文对象

上下文对象通过this变量进行体现,这个变量永远指向当前代码所处的对象中。见下面的代码:

var obj ={
    yes:function(){
        this.val = true;
    },
    no:function(){
        this.val = false;
    }
}
alert(obj.val == null);   //这里我们发现对象obj没有val属性
obj.yes();                     //执行yes函数,obj有了val属性
alert(obj.val == true);
 
window.no = obj.no     //把obj的no函数传给window对象
window.no();
alert(obj.val == true) ;  //发现没有变化
alert(window.val == false)   //window里的val变为false;
登录后复制

这里不太好理解,幸运的是,JS为我们提供了call方法。见下面的例子:

function changeColor(color)
{
    this.style.color = color;
}
changeColor("Red");    //这里不行,因为window对象没有style属性
var temp = document.getElementById("temp");
changeColor.call(temp,"White");  //这里注意call的用法
登录后复制

call方法将上下文对象设置为第一个参数,并将其他参数作为原函数的参数。

六、对象

到这里我们才进入正题,但有了前面的概念,这也块内容其实也不是很多。我们直接看例子:

var obj = new Object();    //创建一个对象obj
obj.val = 5;               //创建属性obj,并为其赋值
obj.click = function()     //创建函数
{
    alert("我被单击了");
}
登录后复制

上面的代码与下段代码等价:

var obj = {
    val : 5,
    click: function(){
        alert("我被单击了");
    }
}
登录后复制

与其他面向对象语言不同的是,JS并没有Class的概念,在其他语言中,我们基本都需要实例化某个具体类的实例,但JS里却不同,它的做法是:任何函数都可以被实例化为一个对象。我们首先创建一个简单的对象:

function User(name)
{
    this.name = name;
}
var temp = new User("张三");
alert(temp.name);
登录后复制

如果上面的对象User只作为函数使用呢?

User("只作为函数使用");
alert(window.name);
登录后复制

this的上下文变成了window对象。

七、对象的方法

公共方法在对象的上下文中是最终用户可以接触到的。这里我们需要理解prototype(原型)属性。见下面的代码:

function User(name,age)
{
    this.name = name;
    this.age = age;
}
User.prototype.getName = function(){ return this.name};
var user = new User("张三",25);
alert(user.getName());
登录后复制

我们也可以动态创建公共方法,见下面的代码:

function User(name,age)
{
    this.name = name;
    this.age = age;
    this.getName = function(){ return this.name};
}
 
var user = new User("张三",25);
alert(user.getName());
登录后复制

动态生成的方法不是在代码第一次编译时就已经生成,这个技巧被利用prototype开销要大,但也更强大、更灵活。

 以上就是JavaScript对象学习笔记 的内容,更多相关内容请关注PHP中文网(www.php.cn)! 


本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

WebSocket与JavaScript:实现实时监控系统的关键技术 WebSocket与JavaScript:实现实时监控系统的关键技术 Dec 17, 2023 pm 05:30 PM

WebSocket与JavaScript:实现实时监控系统的关键技术引言:随着互联网技术的快速发展,实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用,并给出代码示例,详细解释其实现原理。一、WebSocket技

JavaScript和WebSocket:打造高效的实时天气预报系统 JavaScript和WebSocket:打造高效的实时天气预报系统 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket:打造高效的实时天气预报系统引言:如今,天气预报的准确性对于日常生活以及决策制定具有重要意义。随着技术的发展,我们可以通过实时获取天气数据来提供更准确可靠的天气预报。在本文中,我们将学习如何使用JavaScript和WebSocket技术,来构建一个高效的实时天气预报系统。本文将通过具体的代码示例来展示实现的过程。We

如何将 MySQL 查询结果数组转换为对象? 如何将 MySQL 查询结果数组转换为对象? Apr 29, 2024 pm 01:09 PM

将MySQL查询结果数组转换为对象的方法如下:创建一个空对象数组。循环结果数组并为每一行创建一个新的对象。使用foreach循环将每一行的键值对赋给新对象的相应属性。将新对象添加到对象数组中。关闭数据库连接。

简易JavaScript教程:获取HTTP状态码的方法 简易JavaScript教程:获取HTTP状态码的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教程:如何获取HTTP状态码,需要具体代码示例前言:在Web开发中,经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时,我们经常需要获取返回的HTTP状态码来判断操作是否成功,根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码,并提供一些实用的代码示例。使用XMLHttpRequest

PHP 函数如何返回对象? PHP 函数如何返回对象? Apr 10, 2024 pm 03:18 PM

PHP函数可以通过使用return语句后跟对象实例来返回对象,从而将数据封装到自定义结构中。语法:functionget_object():object{}。这允许创建具有自定义属性和方法的对象,并以对象的形式处理数据。

数组和对象在 PHP 中的区别是什么? 数组和对象在 PHP 中的区别是什么? Apr 29, 2024 pm 02:39 PM

PHP中,数组是有序序列,以索引访问元素;对象是具有属性和方法的实体,通过new关键字创建。数组访问通过索引,对象访问通过属性/方法。数组值传递,对象引用传递。

如何在JavaScript中获取HTTP状态码的简单方法 如何在JavaScript中获取HTTP状态码的简单方法 Jan 05, 2024 pm 01:37 PM

JavaScript中的HTTP状态码获取方法简介:在进行前端开发中,我们常常需要处理与后端接口的交互,而HTTP状态码就是其中非常重要的一部分。了解和获取HTTP状态码有助于我们更好地处理接口返回的数据。本文将介绍使用JavaScript获取HTTP状态码的方法,并提供具体代码示例。一、什么是HTTP状态码HTTP状态码是指当浏览器向服务器发起请求时,服务

C++ 函数返回对象时有什么需要注意的? C++ 函数返回对象时有什么需要注意的? Apr 19, 2024 pm 12:15 PM

在C++中,函数返回对象需要注意三点:对象的生命周期由调用者负责管理,以防止内存泄漏。避免悬垂指针,通过动态分配内存或返回对象本身来确保对象在函数返回后仍然有效。编译器可能会优化返回对象的副本生成,以提高性能,但如果对象是值语义传递的,则无需副本生成。

See all articles