JS笔记五(函数分类)

函数包含一组语句,它们是JS的基础模块单元,用于代码复用、信息隐藏和组合调用。
函数调用方式:
匿名函数立即执行
具名调用
表达式调用
事件调用

<script type="text/javascript">
	/*具名函数调用  如果是使用function关键字进行的函数定义,
     那么定义会自动提前
	*/
    f1();

	function f1(){
		alert("调用f1函数");
	}

    
    /*表达式的形式 */ 
	var f2 = function(){
		alert("调用f2函数");
	}

	f2();

   /*匿名函数的立即执行*/
	(function(n){
		alert("调用函数"+n);
	})(10);


	/*事件触发回调函数执行*/

	window.onload = function(){
		alert("windows加载完成");
	}

</script>

构造函数:
当任意一个普通函数用于创建一类对象时,它就被称作构造函数或构造器。

<script type="text/javascript">
    /*构造函数的命名  驼峰命名*/

	function createPerson(username,age){
       this.username = username;
       this.age = age;
       this.sayHello = function(){
       	alert("hello world");
       }
	}

	let person = new createPerson("lisi",26);
	console.log(person);
</script>

函数上下文:
this 是JS语言的一个关键字,它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。

纯粹的函数调用,指全局对象
作为构造函数调用,指创建出来的对象
作为apply调用时
事件回调函数中,指触发事件的对象
<script type="text/javascript">

	var username = '李四';
	function person(){
		console.log(this);
	}

	person();    //Window


   function person2(){
		console.log(this.username);
	}

	person2();    //李四
  
</script>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
    <button id="btn">提交</button>
</body>
<script type="text/javascript">
	function createPerson(username,age){
           this.username = username;
           this.age = age;
           this.sayHellow = function(){
           	 alert("helloworld");
           }
	}

	function createStudent(username,age,sex){
		createPerson.apply(this,[username,age]);

		this.sex = sex;
	}

	var student = new createStudent("张三",20,"男")

	console.log(student);  //createStudent age: 20 sayHellow: ƒ ()sex: "男"username: "张三"__proto__: Object

    var btn = document.getElementById("btn");

    btn.onclick = function(){
    	console.log(this);   //<button id="btn">提交</button>
    }


</script>
</html>

用关键字new创建对象 new 都做了什么:
1、创建一个新对象,如:var person ={ }
2、新对象的_proto_属性指向构造函数的原型对象。
3、将构造函数的作用域赋值给新对象(所以this对象指向新对象)
4、执行构造函数内部的代码,将属性添加给person中的this对象。
5、返回新对象person。

JS原型-prototype:
每个构造函数都会有prototype属性,表示该函数的原型。而prototype属性又是作为一个对象来出现的,它上面有constructor属性指向构造函数本身,__proto __是所有JS对象都有的一个属性,指向其构造函数的原型。
向prototype上添加方法是prototype的一个重要的用法。函数(方法)是引用类型的变量,也就是说如果将方法直接添加到对象上,是浪费内存空间的。所以可以使用prototype,将方法添加到prototype上。

<script type="text/javascript">
	/*一般定义构造函数里面的方法属性的时候,一般会将其添加到prototype属性*/
	/*person._proto_===createPerson.prototype */
	function createPerson(username,age){
		this.username = username;
		this.age = age;
	}

    createPerson.prototype.walk = function(){
    	alert("it is walking");
    }

    createPerson.prototype.sayHello = function(){
    	alert("hello world1");
    }

	var person = new  createPerson('lisi',26);

	console.log(person);
    
    console.log(createPerson.prototype);

    person.walk();

    person.sayHello();

</script>

在这里插入图片描述

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值