1.普通函数与构造函数的区别
1.1 普通函数 :
(1)调用 fun()
(2)调用函数,不会创建新对象
(3)函数内部this指向调用它的对象,没有指明调用对象,指向window
(4)普通函数大多以小写字母开头
(5)没有返回值
1 2 3 | // 普通函数定义 function fun() { } |
1.2 构造函数 :
(1)调用 f = new Fun(); 使用new操作符
(2)调用函数需要创建实例对象
(3)函数内部this指向创建的对象 fun
(4)构造函数都应该以大写字母开头
(5)有默认的返回值,即新创建的实例对象
(6)构造函数是一种特殊的函数,通过使用`function`关键字和首字母大写来定义。构造函数用于创建对象实例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | window = globalThis; function Fun(name, age) { this .name = name; this .age = age; this .dowhat = function want() { console.log( this .name + "想吃好吃的" ); } } //普通函数调用 未指明对象 则this指向window Fun( "小仙女" , 21); window.dowhat(); //小仙女想吃好吃的 //构造函数调用 this指向实例对象res let res = new Fun( "小猪" , 22); //res是实例对象 res.dowhat(); //小猪想吃好吃的 |
1.3 普通函数与构造函数:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | function foo() { var f2 = new foo2(); //使用构造函数调用foo2() ,f2中为foo2()的返回值 console.log(f2); // {a: 3} console.log( this ); //在foo中未指明调用对象,则this 指向 window return true ; } function foo2() { console.log( this ); // 在foo()中进行了实例化,this指向 foo2的实例对象 return {a: 3}; } var f1 = foo(); //使用普通函数调用foo(),f1存储返回值 console.log(f1); // true |
2.构造函数与原型prototype的区别
2.1 构造函数
(1)浪费内存,每次同一个函数对象上生成一个实例,就可能出现重复的内容。
(2)效率低,因为重复内容也需要再次进行处理
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | function Cat(name, color) { this .name = name; this .color = color; this .type = "猫科动物" ; this .eat = function () { console.log(`${ this .name}-->${ this .color}-->${ this .type}-->吃老鼠`); }; } //生成实例: var cat1 = new Cat( "大毛" , "黄色" ); var cat2 = new Cat( "二毛" , "黑色" ); console.log(cat1.type); // 猫科动物 cat1.eat(); // 吃老鼠 指向的是cat1 大毛 cat2.eat(); // 吃老鼠 指向的是cat2 二毛 console.log(cat1.eat == cat2.eat); //false |
构造函数Cat()创建了两个实例 cat1,cat2。
Cat函数上的属性和方法,却被重复使用了两遍,例如猫科动物,以及eat()方法,这些在两个实例上的使用结果都相同。
其次构造函数的最大特点是this指向,两个实例的创建,意味着this指向的改变,两个实例是相互独立的,有各自的作用域链,这也是两个对象为什么cat1.eat 不等于 cat2.eat。
2.2 原型prototype
(1)共有属性存在prototype中,减少了内容的重复使用,同一个对象的多个实例共享其prototype上的属性
(2)prototype中大多定义不变的属性,当prototype中属性发生改变,其实例对象上的属性也发生改变
(3)当所有对象使用同一个函数时,选择原型法更方便。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | //构造函数 function Cat(name, color) { this .name = name; this .color = color; } //原型属性和方法 Cat.prototype.type = "猫科动物" ; Cat.prototype.eat = function () { console.log(`${ this .name}-->${ this .color}-->${ this .type}-->吃老鼠`); }; //生成实例。 var cat1 = new Cat( "大毛" , "黄色" ); var cat2 = new Cat( "二毛" , "黑色" ); console.log(cat1.type); // 猫科动物 cat1.eat(); // 吃老鼠 cat2.eat(); //吃老鼠 console.log(cat1.eat == cat2.eat); //ture |
可见两个实例的原型都指向同一个原型对象,所以他们的type属性,eat()方法共享,所以cat1.eat 与 cat2.eat的值也相同。_proto_
都指向prototype
对象,其实就是同一个内存地址,因此就提高了运行效率
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 我干了两个月的大项目,开源了!
· 千万级的大表,如何做性能调优?
· 盘点!HelloGitHub 年度热门开源项目
· Phi小模型开发教程:用C#开发本地部署AI聊天工具,只需CPU,不需要GPU,3G内存就可以运行,
· 你所不知道的 C/C++ 宏知识——基于《C/C++ 宏编程的艺术》
2021-01-06 隐藏 Selenium
2020-01-06 filezilla 认证失败 Received unexpected end-of-file from SFTP server