[js高手之路]构造函数的基本特性与优缺点

Ajian 发布于2019-08-20 18:57 / 2280人阅读

摘要：所以一句话理解的运算规则为检测左侧的原型链上，是否存在右侧的原型。

上文,通过基本的对象创建问题了解了构造函数，本文，我们接着上文继续了解构造函数的基本特性，以及优缺点.

每个对象上面都有一个constructor属性( 严格意义上来说，是原型上的，对象是通过查找到原型找到 constructor属性 ).后面讲到原型的时候，我会用示意图的方式说明

 1         function CreateObj(uName) {
 2             this.userName = uName;
 3             this.showUserName = function () {
 4                 return this.userName;
 5             }
 6         }
 7         var obj1 = new CreateObj("ghostwu");
 8         var obj2 = new CreateObj("卫庄");
 9         console.log( obj1.constructor === CreateObj ); //true
10         console.log( obj2.constructor === CreateObj ); //true

默认情况下，对象的constructor等于实例化对象的构造函数, constructor最初的作用是用来标识对象的，但是并不是特别准确，因为constructor能被修改,

识别对象一般用instanceof关键字.

什么是instanceof？

要理解这个关键字，需要搞清楚原型链，这里，我提前把他放出来

//假设instanceof运算符左边是L，右边是R
L instanceof R 
//instanceof运算时，通过判断L的原型链上是否存在R.prototype
L.__proto__.__proto__ ..... === R.prototype ？
//如果存在返回true 否则返回false
注意：instanceof运算时会递归查找L的原型链，即L.__proto__.__proto__.__proto__.__proto__...直到找到了或者找到顶层为止。

所以一句话理解instanceof的运算规则为：

instanceof检测左侧的__proto__原型链上，是否存在右侧的prototype原型。

console.log( obj1 instanceof Object ); //true
console.log( obj2 instanceof Object ); //true
console.log( obj1 instanceof CreateObj ); //true
console.log( obj2 instanceof CreateObj ); //true

obj1,obj2之所以是Object的实例，因为所有对象继承自Object

借用构造函数

一个空对象，可以借用现有的构造函数，完成属性和方法的复制

 1         function CreateObj(uName) {
 2             this.userName = uName;
 3             this.showUserName = function () {
 4                 return this.userName;
 5             }
 6         }
 7         var obj = new Object();
 8         CreateObj.call( obj, "ghostwu" );
 9         console.log( obj.userName ); //ghostwu
10         console.log( obj.showUserName() ); //ghostwu

构造函数的优点与缺点

优点就是能够通过instanceof识别对象，缺点是每次实例化一个对象，都会把属性和方法复制一遍

1         var obj1 = new CreateObj("ghostwu");
2         var obj2 = new CreateObj("卫庄");
3 
4         console.log( obj1.showUserName === obj2.showUserName ); //false

从以上执行结果，可以看出obj1.showUserName和obj.showUserName不是同一个【在js中，引用类型比较的是地址, 函数是一种引用类型】，而是存在两个不同
的内存地址，因为每个对象的属性是不一样的，这个没有什么问题，但是方法执行的都是一样的代码，所以没有必要复制，存在多份，浪费内存.这就是缺点

怎么解决构造函数的方法复制多次的问题？

 1         function CreateObj(uName) {
 2             this.userName = uName;
 3             this.showUserName = showUserName;
 4         }
 5         function showUserName (){
 6             return this.userName;
 7         }
 8         var obj1 = new CreateObj("ghostwu");
 9         var obj2 = new CreateObj("卫庄");
10         console.log( obj1.showUserName === obj2.showUserName ); //true

把对象的方法指向同一个全局函数showUserName, 虽然解决了多次复制问题，但是全局函数非常容易被覆盖，也就是大家经常说的污染全局变量.

比较好的解决方案？

通过原型(prototype)对象，把方法写在构造函数的原型对象上

1         function CreateObj(uName) {
2             this.userName = uName;
3         }
4         CreateObj.prototype.showUserName = function(){
5             return this.userName;
6         }
7         var obj1 = new CreateObj("ghostwu");
8         var obj2 = new CreateObj("卫庄");
9         console.log( obj1.showUserName === obj2.showUserName ); //true

idc机房托管服务器托管 spark实战高手之路 JS构造函数云服务器的基本构造组成有哪些 ava类中的构造函数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84946.html

[js高手之路]原型对象(prototype)与原型链相关属性与方法详解

摘要：一，检测左侧的原型链上，是否存在右侧的原型我在之前的两篇文章高手之路构造函数的基本特性与优缺点高手之路一步步图解的原型对象原型链已经分享过了卫庄二如果隐式原型指向调用方法的对象原型那么这个方法就返回，如卫庄因为的隐式原型指向的都是，有朋友可一，instanceof： instanceof检测左侧的__proto__原型链上，是否存在右侧的prototype原型. 我在之前的两篇文章 ...

svtter 2019-08-20 19:02 评论0 收藏0
[js高手之路] es6系列教程 - 新的类语法实战选项卡

摘要：其实的面向对象很多原理和机制还是的，只不过把语法改成类似和老牌后端语言中的面向对象语法一用封装一个基本的类是不是很向和中的类其实本质还是原型链，我们往下看就知道了首先说下语法规则中的就是类名，可以自定义就是构造函数，这个是关键字，当实例化对其实es6的面向对象很多原理和机制还是ES5的，只不过把语法改成类似php和java老牌后端语言中的面向对象语法. 一、用es6封装一个基本的类 ...

yintaolaowanzi 2019-08-21 16:17 评论0 收藏0
[js高手之路]使用原型对象(prototype)需要注意的地方

摘要：原型对象的共享特性，可以很方便的为一些内置的对象扩展一些方法，比如，数组去重复但是，不要随便往内置的对象上面扩展方法，在多人协作开发，很容易产生覆盖，以及污染我们先来一个简单的构造函数+原型对象的小程序 1 function CreateObj( uName, uAge ) { 2 this.userName = uName; 3 ...

chnmagnus 2019-08-20 19:06 评论0 收藏0
[js高手之路]搞清楚面向对象,必须要理解对象在创建过程中的内存表示

摘要：面向对象编程方式，对于初学者来说，会比较难懂要学会面向对象以及使用面向对象编程，理解对象的创建在内存中的表示，至关重要首先，我们来一段简单的对象创建代码卫庄卫庄上例，我们创建了两个对象和如果有多个类似对象，我们可以通过函数封装，这种函数封装 javascript面向对象编程方式，对于初学者来说，会比较难懂. 要学会面向对象以及使用面向对象编程，理解对象的创建在内存中的表示，至关重要. ...

binta 2019-08-20 18:56 评论0 收藏0
[js高手之路]this知多少

摘要：关键字在中的变化非常的灵活，如果用的不好就非常恶心，用的好程序就非常的优雅，灵活，飘逸所以掌握的用法，是每一个前端工程师必知必会的而且这个也是一些大公司笔试中常见的考察项第一种单独的，指向的是这个对象注当前的执行环境是所以指向了第二种全局函 this关键字在javascript中的变化非常的灵活，如果用的不好就非常恶心，用的好,程序就非常的优雅，灵活，飘逸.所以掌握this的用法，是每...

APICloud 2019-08-20 19:07 评论0 收藏0