本文系统整理JavaScript基础函数用法,涵盖函数声明、字面量、引用传递及对象方法绑定。深入解析闭包机制、IIFE自执行函数、原型链共享属性,以及特权方法与单例模式的实现,提供完整代码示例。
JavaScript基础函数定义与调用
本文整理并汇总了JavaScript中常用且实用的基础函数,旨在帮助开发者更深入地理解JavaScript的核心机制。
具体实现代码如下:
<script type="text/javascript">
/* 函数声明与字面量定义 */
/*
function add(){
alert("函数创建成功")
};
var testfunction=function(){
alert("这是一个匿名函数");
};
add(); // 调用普通函数
testfunction();// 调用字面量函数
*/
/*
var testobj=new Object(); // 创建对象实例
testobj.run=function(){ // 为对象定义方法
alert("这是对象内部的方法");
};
testobj.run(); // 调用对象方法
*/
函数引用与对象方法绑定/* 函数作为对象处理 */
/*
function ball(){
}
ball.name1="testing"; // 为函数对象添加属性
alert(ball.name1); // 访问函数属性
alert(typeof ball)
*/
/* 函数引用传递 */
/*
function myFunction(message){
alert(message);
}
var ptr=myFunction; // 将函数引用赋值给变量
ptr("Testing"); // 通过变量调用函数
*/
/* 将函数引用传递给多个对象 */
/*
function sayName(name1){
alert(name1);
}
var obj1=new Object();
var obj2=new Object();
var obj3=new Object();
obj1.sayMyName=sayName; // 将引用赋给对象,形成方法
obj2.sayMyName=sayName;
obj3.sayMyName=sayName;
obj1.sayMyName("张三") // 调用对象方法
obj2.sayMyName("李四");
obj3.sayMyName("王五")
*/
/*
function add(){
}
add.message="chaiyesong"
var ptr1=add;
var ptr2=add;
alert(ptr1.message);
alert(ptr2.message)
add.message="123";
alert(ptr1.message)
alert(ptr2.message)
*/
/* 修改函数引用指向 */
/*
function add(){
alert("one");
}
var ptr=add;
ptr=function(){ // 创建新函数,未修改原引用
alert("ptr")
}
add=function(){ // 修改原函数引用
alert("two")
}
add()
ptr()
*/
/* 构造函数与对象创建 */
/*
function Ball(message){
alert(message)
}
var ball0=new Ball("testing")
ball0.name1="ball-0"
alert(ball0.name1)
function Ball(message){
alert(message)
}
var ball0=new Object()
ball0.constuct=Ball; // 将函数引用指向对象构造器
ball0.constuct("ceshiceshiceshi") // 执行构造器函数
ball0.name1="tesing"
alert(ball0.name1)
function Test(){
}
alert(Test.prototype) // 访问共享属性
*/
原型链与共享属性应用/* 添加原型共享属性 */
/*
function Fish(naem1,color1){
this.name1=naem1
this.color1=color1
}
Fish.prototype.LivesIn="water" // 添加共享属性
Fish.prototype.price=20
var fish1=new Fish("mackrel","gray")
var fish2=new Fish("goldfish","orange");
var fish3=new Fish("salmon", "white");
for (var i=1; i<=3; i++)
{
var fish=eval("fish"+i); // 获取指向鱼的引用
alert(fish.name1+","+fish.color1+","+fish.LivesIn+","+fish.price);
}
*/
/*
function Employee(name, salary)
{
this.name=name;
this.salary=salary;
}
Employee.prototype.getSalary=function getSalaryFunction()
{
return this.salary;
}
Employee.prototype.addSalary=function addSalaryFunction(addition)
{
this.salary=this.salary+addition;
}
var boss1=new Employee("Joan", 200000);
var boss2=new Employee("Kim", 100000);
var boss3=new Employee("Sam", 150000);
alert(boss1.getSalary()); // 输出 200000
alert(boss2.getSalary()); // 输出 100000
alert(boss3.getSalary()); // 输出 150000
*/
立即执行函数与闭包机制/* 立即执行函数表达式 (IIFE) */
/*
(function(x,y){
alert(x+y)
})(2,3)// 函数自我执行
*/
/* 执行并调用函数 */
/*
var f1=function(){
return "testing"
}
alert(f1())
*/
/* 将自执行结果赋值给变量 */
/*
var f2=function(){
return "ok"
}()
alert(f2)
*/
// (
// function(){
// alert("fa")
// }()
// )
/*
function box(){
var user='Tt'
return function(){
return user;
}
}
alert(box()()) // 调用内嵌函数
*/
// var b=box()
// alert(b())
/* 利用闭包实现状态保持 */
/*
function box(){
var age=100
return function(){ // 调用此方法使数据驻留内存
age++
return age;
}
}
var b=box()
alert(b())
alert(b())
alert(b())
*/
闭包陷阱与改进方案/* 初始版本:闭包陷阱 */
/*
function box(){
var arr=[] // 声明数组
for (var i = 0; i <5; i++) {
arr[i]=function(){ // 将函数赋值给元素
return i;
}
}
return arr; // 返回数组
}
var b=box() // 将返回数组赋值给b
document.writeln("数组的长度为:"+b.length+"<br />") // 输出数组长度
for (var i = 0; i < b.length; i++) {
document.writeln("匿名函数返回的值为:"+b[i]()+"<br />") // 执行结果均为5
};
*/
/* 改进版本:利用IIFE捕获值 */
/*
function box1() {
var arr1 = [];
for (var i = 0; i < 5; i++) {
arr1[i] = (function (num) { // 自执行,结果赋值给元素
return num;
})(i); // 传入参数
}
return arr1;
}
var b1 = box1(); // 返回数组
for (var i = 0; i < b1.length; i++) {
document.writeln("改进后 输出的结果为:")
document.writeln(b1[i]+"<br />"); // 直接打印数组元素
}
*/
// 测试版
/*
var testarr=[];
for (var i = 0; i < 5; i++) {
testarr[i]=function(){
return i;
}
};
document.writeln("测试板的长度为:"+testarr.length+"<br >")
for (var i = 0; i < testarr.length; i++) {
document.writeln("测试版第"+(i+1)+"次"+testarr[i]+"<br />")
};
var aa=function(){
return 3
}
document.writeln("测试版测试的结果"+aa)
*/
/* 改进版本3:返回函数 */
/*
function box3() {
var arr3= [];
for (var i = 0; i < 5; i++) {
arr3[i] = (function (num) {
return function () {
return num;
}
})(i);// 自执行结果赋值给元素
}
return arr3;
}
var b3= box3();
for (var i = 0; i < b3.length; i++) {
document.writeln(b3[i]()+"<br />");
}
*/
/*js函数教程地址://http://www.cnblogs.com/ttcc/p/3763437.html*/
闭包中的this指向与内存管理/* 闭包中的this指向window */
/*
var user='The Window00';
var obj={
user:'The Window001',
getUserFunction:function(){
return function(){
return this.user;
}
}
}
document.writeln("返回this指定的对象"+obj.getUserFunction()())
*/
// function box(count1){
// var i=12;
// for (var i = 0; i < count1; i++) {
// document.writeln(i);
// }
// }
// var i=10
// box(2)
/* 闭包执行完毕清除内存 */
/*
function box(count) {
(function () {
for (var i = 0; i<count; i++){
}
})();
document.writeln(i); // 报错,无法访问
}
box(2);
*/
特权方法与单例模式实现/* 通过闭包访问私有属性 */
/*
function Box() {
var age = 100; // 私有变量
function run() { // 私有函数
return '运行中...';
}
this.get = function () { // 特权方法
return age + run();
};
}
var box = new Box();
alert(box.get());
function Person(value) {
var user = value; // 可省略
this.getUser = function () {
return user;
};
this.setUser = function (value) {
user = value;
};
}
*/
/* 单例模式实现 */
/*
var box = function () {
var user = 'TT'; // 私有变量
function run() { // 私有函数
return '运行中...';
}
return {
publicGo : function () { // 公共接口
return user + run();
}
};
}();
alert(box.publicGo());
*/
/* 单例模式实现方式二 */
/*
function Desk() {
// 定义函数
}
var box = function () {
var user = 'TT'; // 私有变量
function run() { // 私有函数
return '运行中...';
}
var desk = new Desk(); // 实例化对象
desk.publicGo = function () {
return user + run(); // 定义方法
};
return desk;
}();
alert(box.publicGo());
*/
</script>
以上即为整理的JavaScript基础函数内容,建议仔细研究以加深理解。