JS笔记五（函数分类）

最新推荐文章于 2022-11-22 16:47:47 发布

FreeSoar1

最新推荐文章于 2022-11-22 16:47:47 发布

阅读量174

点赞数

文章标签： JS 构造函数 this Apply

本文链接：https://blog.csdn.net/u011846249/article/details/85064961

版权

函数包含一组语句，它们是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>

在这里插入图片描述