JavaScript中冒号(:)的四种核心用法详解

冒号在JavaScript中频繁出现，但网络上关于其用法的介绍往往零散且缺乏深度，容易让人困惑。经过两天的资料查阅与整理，我对冒号（:）的使用有了更清晰的认识，特此总结，希望能帮助其他开发者理清思路。

switch与三元运算符中的冒号

1、switch语句分支

2、?:三元表达式的false分支

3、声明对象直接量的成员

4、声明标签

1和2相信地球人都知道吧？如果有人不知道,那我改成地球上的程序员都知道,哈哈

对象直接量中的冒号用法

第三点涉及对象直接量，我们需要先明确什么是对象直接量。

对象直接量（亦称对象初始化程序）由一组属性/值对组成，这些对之间用冒号分隔，而不同的属性对之间则用逗号分隔，整个结构被包裹在花括号{}中。

JavaScript中的对象可以像C#或Java等面向对象语言中的对象一样，拥有属性和方法。

在JavaScript中创建对象有多种方式，例如可以使用Object构造函数来创建。

var obj1 = new Object();
obj1.X = "20px";
obj1.Y = "30px";
obj1.myFunction = function() { alert("我是一个方法！"); };
obj1.myFunction();

var obj2={X:"20px",Y:"30px",myFunction:function(){alert("我是一个方法！");}}
obj2.myFunction();

使用对象直接量创建对象的方式看起来更加简洁直观。

当然，你也可以先定义一个类似类的构造函数，然后通过new关键字创建实例。

function myClass(x, y) {
this.X = x;
this.Y = y;
} 
myClass.prototype.myFunction=function(){
alert("我是一个方法！");
} 
var obj3 = new myClass("20px", "30px");
obj3.myFunction();

HTML事件中的协议前缀与标签声明

脚本语言种类繁多，除了JavaScript，其他脚本语言也能实现类似功能。

例如：

<input type="button" onclick="vbscript:vbFunction()" value='按钮'/>

当点击按钮时，浏览器会使用vbscript语法执行你定义的vbFunction方法。

如果将onclick后面的vbscript:vbFunction()改为javascript:vbFunction();，则可能会出错。

在某些情况下，你可以省略协议前缀直接调用方法。

<input type="button" onclick="vbFunction()" value='按钮'/>

此时，onclick中的方法无论使用vbscript还是javascript，IE浏览器会自动识别并执行相应的语法，但其他浏览器不支持vbscript。

平时使用JavaScript时，习惯上会加上声明前缀，即"javascript:"。

<input type="button" onclick="javascript:alert('你点击了我！')" value='按钮'/>

"javascript:"前缀常被一些安全研究人员或黑客利用，用于绕过简单的HTML表单限制、Cookie/Session验证，甚至进行SQL注入。如需了解具体原理，请查阅其他资料，但请确保仅用于合法学习，切勿用于破坏。

这里做一个简单的演示例子：

首先打开www.baidu.com首页，然后将下面这行代码直接复制到浏览器地址栏并按回车。

javascript:alert(document.forms[0].wd.value='csdn');document.forms[0].submit()

效果如何？不错，我们利用JavaScript直接操作了搜索框中的文本，并执行了表单提交。更复杂的操作，大家可以自行研究。