第197天:js---caller、callee、constructor和prototype用法

简介: 一、caller---返回函数调用者 1 //返回函数调用者 2 //caller的应用场景 主要用于察看函数本身被哪个函数调用 3 function fn() { 4 //判断某函数是否被调用 5 if (fn.

一、caller---返回函数调用者

 1 //返回函数调用者
 2 //caller的应用场景 主要用于察看函数本身被哪个函数调用
 3     function fn() {
 4 //判断某函数是否被调用
 5         if (fn.caller) {
 6             alert(fn.caller.toString());
 7         } else {
 8             alert("函数直接执行");
 9         }
10     }
11     function handleCaller() {
12         fn();
13     }
14     // fn被其他函数调用
15     handleCaller();
16     //fn没有被其它函数调用而是直接执行
17     fn();

二、callee---返回正被执行的 Function 对象

 1 // 返回正被执行的 Function 对象,也就是所指定的 Function 对象的正文.
 2 // callee是arguments 的一个属性成员,它表示对函数对象本身的引用
 3 // arguments.callee.length可以获取实参参数
 4 
 5 
 6 //callee用处1 用来判断实际参数跟行参是否一致
 7 function calleeLengthDemo(arg1, arg2) {
 8 //    callee表示当前正在执行的函数对象,其实是函数的一个实例化
 9     alert(arguments.callee.toString());
10     if (arguments.length == arguments.callee.length) {
11         window.alert("验证形参和实参长度正确!");
12         return;
13     } else {
14         alert("实参长度:" + arguments.length);
15         alert("形参长度: " + arguments.callee.length);
16     }
17 }
18 //当函数被执行的时候,生成一个实例
19 calleeLengthDemo(1);
20 
21 
22 //callee用处2 调用自身 - 比如递归函数
23 // 优点:这样就让代码更加简练。又防止了全局变量的污染
24 //如下是一个递归算法 - 计算 1+2+3+4+...+n
25 var fn=(function(n){
26     if(n>0) return n+arguments.callee(n-1);
27     return 0;
28 })(10);
29 alert('采用callee方式:'+fn);
30 
31 
32 // 传统方式的缺点:
33 // 1,破坏了,零重复法则,当一旦函数名称更改,需要更改多处
34 // 2,fn是一个全局变量,fn内部一般使用局部bianliang,而这里是一个全局变量,这是一个潜在的全局变量污染
35 var fn=function(n){
36     if(n>0) return n+fn(n-1);
37     return 0;
38 }
39 alert('采用传统方式'+fn(10));

三、constructor

 1 //    什么是构造函数 - -专门用于创建对象或者累的函数 -- 因为js中原来没有对象的概念,通过函数来间接实现面向对象
 2 //我们将创建对象的时候那个函数称之为构造函数
 3 //我们可以通过constructor属性获取某个对象的构造函数
 4 //constructor 属性就是用来构造对象实例的函数引用 - 后面的知识点
 5     //构造函数 创建的对象
 6     function Student(name) {
 7         this.name = name;
 8     }
 9     var zhangsan = new Student('张三');
10     if (zhangsan.constructor == Student)
11         document.write("zhangsan是根据构造函数Student创造(实例化)出来的"+"<br />");
12 
13 
14 //字符串对象
15     var str = new String("Hi");
16     if (str.constructor == String)
17         document.write("str是根据构造函数String创造(实例化)出来的");
18 
19     // 输出:
20     // 学生类的构造函数是Student函数
21     // str的构造函数是String

四、prototype属性

 1 // prototype属性 -- 原型创建对象的底层原理 - 重点  __proto__
 2 //获取对象的原型。
 3 //每一个构造函数都有一个prototype属性,指向另一个对象。
 4 //这个对象的所有属性和方法,都会被构造函数的实例继承。
 5 //这意味着,我们可以把那些不变的属性和方法,直接定义在prototype对象上。
 6 
 7 // 目前只需要掌握通俗理解方式:对象的创建其实包含两个部分:构造函数部分,原型部分
 8 // 当我们new一个对象的实例的时候,这个实例能够同时拥有构造函数对象和原型对象的属性和方法就是通过prototype属性来实现的
 9 // 具体实现方式,下次详细讲解
10 
11 
12 //古代的男人
13 function Man(name, age) {
14     this.name = name;
15     this.age = age;
16 }
17 
18 
19 //这里其实是两个对象 Man 和 Man.prototype
20 //这两个对象通过prototype属性实现关联
21 //关联后的结果,Man对象继承Man.prototype,从而使得Man拥有Man.prototype的所有属性和方法
22 
23 
24 Man.prototype.sex = "纯爷们";
25 //方法:战斗
26 Man.prototype.struggle = function () {
27     alert("方天画戟,赤兔,征战沙场!!");
28 }
29 
30 //实例化一个男人
31 var 吕布 = new Man("吕布", 20);
32 alert(吕布.sex);//纯爷们
33 吕布.struggle();//方天画戟,赤兔,征战沙场!!
34 
35 
36 //古代女人
37 function Woman(name, age) {
38     this.name = name;
39     this.age = age;
40 }
41 Woman.prototype.sex = "小家碧玉";
42 Woman.prototype.zhibu = function () {
43     alert("织布 歌舞 琴棋书画");
44 }
45 var 貂蝉 = new Woman("貂蝉", 16);
46 alert(貂蝉.sex);//小家碧玉
47 貂蝉.zhibu();//d织布 歌舞 琴棋书画

 

相关文章
|
23天前
|
JavaScript 前端开发 Serverless
Vue.js的介绍、原理、用法、经典案例代码以及注意事项
Vue.js的介绍、原理、用法、经典案例代码以及注意事项
44 2
|
1月前
|
JavaScript
JS中Null和Undefined的区别及用法
JS中Null和Undefined的区别及用法
22 1
|
21天前
|
前端开发 JavaScript 安全
javascript:void(0);用法及常见问题解析
【6月更文挑战第3天】JavaScript 中的 `javascript:void(0)` 用于创建空操作或防止页面跳转。它常见于事件处理程序和超链接的 `href` 属性。然而,现代 web 开发推荐使用 `event.preventDefault()` 替代。使用 `javascript:void(0)` 可能涉及语法错误、微小的性能影响和XSS风险。考虑使用更安全的替代方案,如返回 false 或箭头函数。最佳实践是保持代码清晰、安全和高性能。
32 0
|
1天前
|
移动开发 JavaScript 前端开发
JavaScript 用法
JavaScript 用法
5 1
|
9天前
|
JavaScript 前端开发
JS中split的用法
JS中split的用法
|
9天前
|
JavaScript 前端开发
JS中find的用法
JS中find的用法
11 0
|
1月前
|
JavaScript 前端开发
Symbol在JavaScript中有哪些具体的用法和语法
Symbol在JavaScript中有哪些具体的用法和语法
|
1月前
|
JavaScript 前端开发
在JavaScript中,函数原型(Function Prototype)是一个特殊的对象
【5月更文挑战第11天】JavaScript中的函数原型是一个特殊对象,它为所有函数实例提供共享的方法和属性。每个函数在创建时都有一个`prototype`属性,指向原型对象。利用原型,我们可以向所有实例添加方法和属性,实现继承。例如,我们定义一个`Person`函数,向其原型添加`greet`方法,然后创建实例`john`和`jane`,它们都能调用这个方法。尽管可以直接在原型上添加方法,但推荐在构造函数内部定义以封装数据和逻辑。
31 2
|
1月前
|
JavaScript 前端开发
JavaScript 用法
【5月更文挑战第1天】JavaScript 用法。
20 3
|
1月前
|
JavaScript 前端开发 开发者
【专栏】JavaScript 中的 prototype 和__proto__是关乎对象继承和属性查找的关键概念
【4月更文挑战第29天】JavaScript 中的 prototype 和__proto__是关乎对象继承和属性查找的关键概念。prototype 是函数属性,用于实现对象继承,方法和属性定义在其上可被所有实例共享。__proto__是对象属性,实现属性查找机制,当对象自身找不到属性时,会沿原型链向上查找。两者关系:__proto__指向构造函数的 prototype,构成对象与原型的桥梁。虽然 prototype 可直接访问,但__proto__由引擎内部维护,不可见。理解两者区别有助于深入学习 JavaScript。