JavaScript面向对象编程-函数的定义和它的内置属性及方法

前面的结尾讲到对象的方法要能够复用,需要引入原型(prototype)内置属性的概念,那我们就一起来揭开函数的内置属性的面纱。

讲之前先发个福利 :https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function 

这个文档还是不错的,可以翻一翻

JavaScript函数的定义以及几点注意事项: 

函数:一个函数是一个对象,其是Function构造函数所生成的实例

方法一:以函数声明的形式来定义函数

function sum(a,b){
			return a+b;
		}

方法二:以值的形式来定义函数

var sub = function(a,b){
			return a-b;
		}

方法三: 以Function构造函数的形式来定义函数

var a = new Function("num","return num*num*num");

 构造函数有多个参数,最后一个参数是函数体的内容本体,前头的参数均为形式参数的名字(字符串),这是函数最原始的状态

以下是注意事项:

1.函数提升。什么事函数提升?函数提升就是把函数的定义提升到代码的最前面,该现象叫做函数提升(function hoisting),而能做到函数提升的函数都是通过函数声明的形式定义的,如果使用了其他的函数定义方法,且在定义之前调用了它,那么你的程序就会报错了。

2.JavaScript是没有函数重载的概念的,如果你重载了函数,那么后写的函数就会覆盖前面的函数。

3.函数就是对象,函数有内置属性,要懂得如何运用,一下就是一些内置属性的分享。

4.函数是可以匿名的,而且还有很多特殊的语法,这里就不展开了,我也是在摸索中学习,做知识的增量。

JavaScript函数内置属性及相关操作: 

内置属性一:prototype

 prototype是JavaScript函数中的内置属性之一 ,是一个对象,那它是用来干什么的呢?它是用来保存所有通过该构造函数创建的对象的公共的属性或方法的容器。有点绕,说形象点,就是构造函数有个金库,new了它就相当于拿到了金库钥匙,然后你就能拿到金库里面的财宝,而prototype就是这个金库,财宝就是所有对象共有的属性和方法,这样以后就能够解决对象方法没办法复用的问题了。代码:

 //查找某种调用,先找实例的相关属性和方法,如果没有找到,则找原型的相关属性和方法。
	    //实例属性和方法会覆盖原型同名属性和方法。搜索顺序是先实例,后原型。
		
		//原型模式来构建对象
		function Student(stuNo,stuName,stuAge) {

			//实例属性
			this.stuNo = stuNo;
			this.stuAge = stuAge;
			this.stuName = stuName;

            //实例方法
			this.sayHello = function(){
				console.log("我来自"+this.college+",我的姓名是"+this.stuName);
			}

		}	

        //原型属性
        Student.prototype.college = "工程学院";
        //原型方法
		Student.prototype.sayHello = function(){
               console.log(this.stuName+": I'm "+this.stuAge+", my stuNo:"+this.stuNo);
		};	

		var stu1 = new Student(12,"mary",9);
		Student.prototype.college = "福州大学";
		var stu2 = new Student(12,"jenny",8);

		stu1.sayHello();
		stu2.sayHello();

		console.log(stu1.sayHello == stu2.sayHello);
		console.log(Student.prototype instanceof Object);

那构造方法、实例对象、原型之间是如何俩俩进行访问的呢?

1.Student.prototype.college//构造函数找原型

2.Student.prototype.constructor//原型找构造函数,原型内有个constructor属性指向构造函数

3.stu1.constructor//实例找构造函数,其实是调用了实例的原型的constructor

4.stu1.__proto__//实例找原型,通过实例中的_proto_属性

内置属性二:arguments

不知道你们发现没有,在调用任意一个函数的时候,不管你写不写参数,写几个参数,都不会报错,任何一个函数都有一个叫做arguments的属性,保存了这个函数所有的参数信息。而所传的参数只是便于调用书写而已,相当于快捷方式,通过arguments也可以获取参数。因此我们调用函数时所传的实参其实都是虚的,并不影响函数的正常运作,但我们还是要用这些虽然虚但是却有价值的实参,毕竟比较方便。代码:

<script type="text/javascript">
		
		function sum(a,b){
		   //任何一个函数都有一个叫做arguments的对象,保存了这个函数所有的参数信息。
		   //JS的函数的参数全部被保存在内置属性arguments中,所谓的形式参数就是为了对arguments中的对应成员进行快捷访问。
		   //console.log(arguments.length);
		   console.log(arguments[0]);
		   arguments[1]=1000;
		   console.log(b);
		   b++;
		   console.log(arguments[1]);
		}

        sum(1);
        sum(11,2,3);
		sum(21,2,3,4,5);

	</script>

 

 

内置属性三:caller与callee

caller也是函数的内置属性,用来获取函数的调用者,而callee是被调用者,比如a调用b,那么b函数的caller就是a,b函数的callee就是自己。代码:

function a(){
           b();
		}

		function b(){
           console.log(b.caller);
           console.log(arguments.callee);
		}

         a();

 callee一般很少用到,但是对于匿名函数,且需要书写递归的时候,要调用自己,可能就需要callee这个属性了,实例:

var sum = function(num){
            if(num === 1)
            	return 1;
            else
            	return num + arguments.callee(num-1);
        }

        function jc(num){
            if(num === 1)
            	return 1;
            else
            	return num * jc(num-1);
        }

        console.log(sum(100)); //1+...+100=5050
        console.log(jc(6)); //1*2*3...*6

内置属性四:this

可能前面有简单的讲过,现在在啰嗦一遍。JavaScript的this是很复杂的,不像java只是指向了本身,JavaScript的this所指的对象是不确定的,随着情况的变化而发生改变。在没有说明调用对象的时候,this指向了全局对象window,但指定的时候,this就是指的当前调用对象。代码:

<script type="text/javascript">
		
		var userName = "mary";

		var employee = {
            userName:'jenny',
            userAge:34,
            showName:function(){
				console.log(this);
				console.log(this.userName);
			}
		};

		var student = {
            userName:'tom',
            userAge:14,
            showName:function(){
				console.log(this);
				console.log(this.userName);
			}
		};		

		function showName(){
			console.log(this);
			console.log(this.userName);
		}

	    showName();
	    //console.log(employee);
        employee.showName();
        student.showName();


	</script>

内置属性五:call()与apply()

 call()与apply()是函数的内置方法,专门用来指定对象来调用自己。说简单的,就是一个函数,很多不同的对象都有定义,但是我要指定其中的一个对象来进行调用,这个就有点类似与java中的多态了,事实证明JavaScript还是很强大的,什么都有。代码:

<script type="text/javascript">
		
		var userName = "mary";

		var employee = {
            userName:'jenny',
            userAge:34
		};

		var student = {
            userName:'tom',
            userAge:14
		};		

		function showName(msg,num){
			// console.log(this);
			console.log(this.userName+" msg:"+msg+",num:"+num);
		}

	    // showName();
	    // console.log(typeof showName.call);
	    showName.call(employee,"hello world!",2);
	    showName.call(student,"hello world!",3);
	    showName("hello world!",100);
	    showName.call(window,"hello world!",100);

	    showName.apply(employee,["hello good!",190]);


	</script>

 

 

以上就是JavaScript函数内置属性的个人理解了,希望能加深你们对JavaScript对象和函数的认识。

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值