js - 什么是構造函數，它和普通函數區別在哪？

1.什么是“構造函數”？

 

用new關鍵字來調用的函數，首字母一般大寫

用this來構造它的屬性以及方法

	function Log(name, desc) {
				this.name = name;
				this.desc = desc;
				this.code = function(){
					console.log('code...')
				}
			}

 

2.構造函數和普通函數區別在哪？

我們寫普通函數時一般習慣用駝峰命名，而構造函數一般首字母大寫（約定俗成）以及構造函數是用來新建實例對象。

 

 

 

 

3.為什么要用它？

假設我們每天寫一些日志，習慣性添加自己稱呼

                        // 1.1 重復添加
			let to1 = {
				name: 'Sunsin',
				desc: '今天注意啥1'
			};
			let to2 = {
				name: 'Sunsin',
				desc: '今天注意啥2'
			};
			let to3 = {
				name: 'Sunsin',
				desc: '今天注意啥3'
			};

			// 1.2 寫個構造函數進行添加
			function Log(name, desc) {
				this.name = name;
				this.desc = desc;
			}

			let to4 = new Log('Sunsin', '今天注意啥4');
			let to5 = new Log('Sunsin', '今天注意啥5');
			console.log(to4, to5);

			// 1.3 寫個普通函數再return
			function Logs(name, desc) {
				return {
					name,
					desc
				};
			}
			
			let to6 = Logs('Sunsin','今天注意啥6');
			console.log(to6);        

 

4. 構造函數的執行過程

在new關鍵字調用時會創建一個新的空間，每當創建實例時函數體內部this都會指向當前

 　  4.1、立刻在堆內存中創建一個新的對象

     4.2、將新建的對象設置為函數中的this

     4.3、逐個執行函數中的代碼

     4.4、將新建的對象作為返回值

 

5. 構造函數的返回值

 

			// 1.4 基本類型的返回值返回this它的指向
			function Hello() {
				this.name = 'sunsin';
				return 'sunsins';
			}
			// 1.5 引用類型(對象)的返回值，最終返回該對象
			function Hello1(){
				this.sex = '女';
				return{
					sex:'男'
				}
			}
			console.log(new Hello().name,new Hello1().sex);

 

　　

6. 檢查一個對象是否是一個類的實例

用instaceof

			function Log(name, desc) {
				this.name = name;
				this.desc = desc;
			}

			let to4 = new Log('Sunsin', '今天注意啥4');
			let to5 = new Log('Sunsin', '今天注意啥5');
			console.log(to4, to5, to5 instanceof Log);

 

 

點擊展開所有例子

// 1.1 重復添加
            let to1 = {
                name: 'Sunsin',
                desc: '今天注意啥1'
            };
            let to2 = {
                name: 'Sunsin',
                desc: '今天注意啥2'
            };
            let to3 = {
                name: 'Sunsin',
                desc: '今天注意啥3'
            };

            // 1.2 寫個構造函數進行添加(代碼復用)
            function Log(name, desc) {
                this.name = name;
                this.desc = desc;
                this.code = function(){
                    console.log('code...')
                }
            }

            let to4 = new Log('Sunsin', '今天注意啥4');
            let to5 = new Log('Sunsin', '今天注意啥5');
            console.log(to4, to5, to5 instanceof Log);

            // 1.3 寫個普通函數再return,而構造函數則將該新對象直接返回
            function Logs(name, desc) {
                return {
                    name,
                    desc
                };
            }

            let to6 = Logs('Sunsin', '今天注意啥6');
            console.log(to6);


            // 1.4 基本類型的返回值返回this它的指向
            function Hello() {
                this.name = 'sunsin';
                return 'sunsins';
            }
            // 1.5 引用類型(對象)的返回值，最終返回該對象
            function Hello1(){
                this.sex = '女';
                return{
                    sex:'男'
                }
            }
            console.log(new Hello().name,new Hello1().sex);

 

原文部分轉載於：https://blog.csdn.net/weixin_41796631/article/details/82939585