1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > JS基础之JS的闭包 构造函数和实例化对象 原型对象和原型

JS基础之JS的闭包 构造函数和实例化对象 原型对象和原型

时间:2020-05-05 03:27:26

相关推荐

JS基础之JS的闭包 构造函数和实例化对象 原型对象和原型

一、JS的闭包

1、定义

闭包是指有权访问另一个函数作用域中的变量的一个函数。简单的说,你可以认为闭包是一个特别的函数,他能够读取其他函数内部变量的函数。

2、作用

正常的函数,在执行完之后,函数里面声明的变量就会被垃圾回收处理掉。但是闭包可以让一个函数作用域中的变量,在执行完之后依旧没有被垃圾回收处理掉。

3、缺点

内存泄漏导致变量无法被释放

栗子:

function fn2() { const c = 3 ;return function () { console.log(c);}}// 闭包:一个函数可以访问另一个函数的变量// 缺点:内存泄漏导致变量无法被释放const res = fn2() ;res() ; //打印结果 3

二、面向对象

编程思想分为面向过程和面向对象:

面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候一个一个依次调用就可以了,它注重问题的解决,代表语言有C语言。面向对象是把构成问题事务分解成各个对象,建立对象的目的不是为了完成一个步骤,而是为了描叙某个事物在整个解决问题的步骤中的行为。完成对真实世界的模拟,把一个对象的共同特点抽离出现,有了所谓的’属性’和’方法’ ,代表语言有JAVA。

而JS并不是一个真正的面向对象的语言,js在模拟面向对象。

三、构造函数和实例化对象

构造函数

在对象的创建过程中,我们发现Object就是构造函数;new关键字调用构造函数就会得到一个对象。

var a=new Object('666');console.log(typeof a); //打印结果 object

所有实例化的对象都共享方法:

var arr1 = new Array() ;var arr2 = new Array() ;console.log(arr1.forEach == arr2.forEach); // true

new做了什么

给函数添加了返回值 返回了一个对象把this指向了这个对象创建了一个对象执行构造函数(为新对象增添属性)

function fn() { console.log(this);console.log(666);}var res = fn() ; // this指向windowconsole.log(res); // 函数没有返回值 undefinedvar res2 = new fn() ; // this指向了对象console.log(res2); // 返回了这个对象

任何一个函数都有可能成为一个构造函数,只要有new就可以

为了区分普通函数和构造函数,js建议构造函数使用大驼峰命名

四、 原型对象和原型

JS 通过构造函数生成新对象,因此构造函数可以视为对象的模板。实例对象的属性和方法,可以定义在构造函数内部。

function Cat(name, color) {this.name = name;this.color = color;this.meow = function () {console.log('喵');};}var cat1 = new Cat('大胖', '白色');var cat2 = new Cat('二胖', '黑色');console.log(cat1.meow === cat2.meow); //false

上面代码中,Cat函数是一个构造函数,函数内部定义了name属性和color属性,所有实例对象(上例是cat1)都会生成这两个属性,即这两个属性会定义在实例对象上面。

通过构造函数为实例对象定义属性,虽然很方便,但是有一个缺点。同一个构造函数的多个实例之间,无法共享属性,从而造成对系统资源的浪费。

prototype属性

原型:任何一个对象都有原型 __ proto __ , 也就是这个构造函数,它指向对应的构造函数的原型对象;

__ proto __ 可以用于查找一个对象是否有某个属性或方法;

function Dog(type){this.type=type;this.say='wang';}Dog.prototype.name='阿牧';const dog=new Dog('德牧')console.log(dog.__proto__==Dog.prototype);//true

原型对象:任何一个函数都有原型对象 prototype ,它的作用是给所有的实例化对象提供共有的属性和方法

JavaScript 规定,所有对象都有自己的原型对象(prototype)。一方面,任何一个对象,都可以充当其他对象的原型;另一方面,由于原型对象也是对象,所以它也有自己的原型。因此,就会形成一个“原型链”(prototype chain):对象到原型,再到原型的原型……(原型链的尽头就是null)

// prototype 原型对象 --- 解决属性和方法共享的问题function person(type , age) {// this.species = '人'this.type = type this.age = age this.speak = function () { console.log(this.age);}// this.say = function () {//console.log('我是人');// }}person.prototype.species = '人'person.prototype.say = function () {console.log('我是人');}var fangZong = new person('男人' , 38)var keZong = new person('男人' , 18)console.log(fangZong.say == keZong.say); // trueconsole.log(fangZong.species == keZong.species); // trueconsole.log(fangZong.constructor); // f personvar arr = new Array()console.log(arr.constructor); // f array

constructor属性

constructor属性的作用是,可以得知某个实例对象,到底是哪一个构造函数产生的,实际上是返回自身的实例对象。由于constructor属性定义在prototype对象上面,意味着可以被所有实例对象继承。

上面代码中,x是构造函数Constr的实例,可以从x.constructor间接调用构造函数。这使得在实例方法中,调用自身的构造函数成为可能。

function Constr() {}var x = new Constr();var y = new x.constructor();y instanceof Constr // true

instanceof

instanceof运算符返回一个布尔值,用于判断一个对象是否是一个构造函数的实例化对象。

*注:instanceof运算符只能用于对象,不适用原始类型的值。

对于undefined和null,instanceOf运算符总是返回false。

undefined instanceof Object // falsenull instanceof Object // false

五、js面向对象的发展过程

工厂模式 创建一个对象,给对象加工(添加属性和方法) , 返回这个对象

缺点:创建出来的对象和函数没有关系 ,方法也不共享

new (创建对象,把this指向了这个对象和返回对象都由new完成了)

解决的关系问题 , 方法依然不共享

prototype 原型对象:提供共享的属性和方法

js面向对象的模拟最终版

自身拥有的属性和方法写在构造函数中共有的属性和方法写在构造函数的原型对象上

function Fn(type) { this.type = type ;this.age = age ;// this.say = function () { //console.log('汪');// }}Fn.prototype.species = '狗' ;Fn.prototype.say = function () { console.log('汪');}var dog = new Fn('狗子') ;console.log(dog);var dog2 = new Fn('柯基') ;console.log(dog);dog.say()// 每一个实例化对象都共享say方法console.log(dog.say == dog2.say); // true// console.log(dog.__proto__); // 指向这个构造函数// console.log(dog.constructor); // Fn

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。