大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章主要讲解了JavaScript面向对象是什么,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。
创新互联长期为成百上千客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为乌尔禾企业提供专业的成都做网站、网站建设,乌尔禾网站改版等技术服务。拥有10多年丰富建站经验和众多成功案例,为您定制开发。
一、面向对象
抽象性
所谓的抽象性就是:如果需要一个对象描述数据,需要抽取这个对象的核心数据
封装性
对象是将数据与功能组合到一起,即封装
继承性
所谓继承性就是自己没有但是别人有,拿过来成为自己的,就是继承,继承是实现复用的一种手段
在JS中没有明确的继承语法(ES6提供了class extend语法),一般都是按照继承的理念实现对象的成员扩充实现继承,因此JS中实现继承的方法非常对多。
传统继承基于类,JS继承基于对象
一个简单的继承模式:混入(mix)
function mix ( o1, o2 ) { for ( var k in o2 ) { o1[ k ] = o2[ k ]; } }
类class:在JS中就是构造函数
实例(instance)与对象(object)
键值对与属性和方法
父类与子类(基类和派生类)
var p = new Person();
首先运算符new
创建了一个对象,类似于{}
,是一个没有任何(自定义)成员的对象。
new
创建对象,那么对象的类型就是创建他的构造函数名{}
无论如何都是Object类型,相当于new Object
然后调用构造函数,为其初始化成员
域表示的就是范围,即作用域,就是一个名字在什么地方可以使用,什么时候不能使用。
简单的说,作用域是针对变量的,比如我们创建一个函数 a1
,函数里面又包了一个子函数 a2
。
// 全局作用域 functiona a1() { // a1作用域 function a2() { // a2作用域 } }
此时就存 在三个作用域:全局作用域,a1
作用域,a2
作用域;即全局作用域包含了 a1
的作用域,a2
的作用域包含了 a1
的作用域。
当 a2
在查找变量的时候会先从自身的作用域区查找,找不到再到上一级 a1
的作用域查找,如果还没找到就
到全局作用域区查找,这样就形成了一个作用域链
。
实用闭包主要是为了设计私有方法和变量。闭包的优点是可以避免全局变量的污染;缺点是闭包会常驻内存,增加内存使用量,使用不当很容易造成内存泄露。在JavaScript中,函数即闭包,只有函数才能产生作用域。
闭包有3个特性:
闭包的作用,就是保存自己私有的变量,通过提供的接口(方法)给外部使用,但外部不能直接访问该变量。
通过使用闭包,我们可以做很多事情,比如模拟面向对象的代码风格;更优雅,更简洁的表达出代码;在某些方面提升代码的执行效率。利用闭包可以实现如下需求:
一个匿名的函数,并立即执行它,由于外部无法引用它内部的变量,因此在执行完后很快就会被释放,关键是这种机制不会污染全局对象。
闭包正是可以做到这一点,因为它不会释放外部的引用,从而函数内部的值可以得以保留。
对象模式
函数内部定义个一个对象,对象中绑定多个函数(方法),返回对象,利用对象的方法访问函数内的数据
function createPerson() { var __name__ = ""; return { getName: function () { return __name__; }, setName: function( value ) { // 如果不姓张就报错 if ( value.charAt(0) === '张' ) { __name__ = value; } else { throw new Error( '姓氏不对,不能取名' ); } } } } var p = createPerson(); p.set_Name( '张三丰' ); console.log( p.get_Name() ); p.set_Name( '张王富贵' ); console.log( p.get_Name() );
函数模式
函数内部定义一个新函数,返回新函数,用新函数获得函数内的数据
function foo() { var num = Math.random(); function func() { return mun; } return func; } var f = foo(); // f 可以直接访问这个 num var res1 = f(); var res2 = f();
沙箱模式
沙箱模式就是一个自调用函数,代码写到函数中一样会执行,但是不会与外界有任何的影响,比如jQuery
(function () { var jQuery = function () { // 所有的算法 } // .... // .... jQuery.each = function () {} window.jQuery = window.$ = jQuery; })(); $.each( ... )
js 垃圾回收机制,也就是当一个函数被执行完后,其作用域会被收回,如果形成了闭包,执行完后其作用域就不会被收回。
函数执行需要内存,那么函数中定义的变量,会在函数执行结束后自动回收,凡是因为闭包结构的,被引出的数据,如果还有变量引用这些数据的话,那么这些数据就不会被回收。因此在使用闭包的时候如果不使用某些数据了,一定要赋值一个null
var f = (function () { var num = 123; return function () { return num; }; })(); // f 引用着函数,函数引用着变量num // 因此在不使用该数据的时候,最好写上 f = null;
一句话说明什么是原型:原型能存储我们的方法,构造函数创建出来的实例对象能够引用原型中的方法。
JS中一切皆对象,而每个对象都有一个原型(Object除外),这个原型,大概就像Java中的父类,所以,基本上你可以认为原型就是这个对象的父对象,即每一个对象(Object除外)内部都保存了它自己的父对象,这个父对象就是原型。一般创建的对象如果没有特别指定原型,那么它的原型就是Object(这就很类似Java中所有的类默认继承自Object类)。
ES6通过引入class
,extends
等关键字,以一种语法糖的形式把构造函数包装成类的概念,更便于大家理解。是希望开发者不再花精力去关注原型以及原型链,也充分说明原型的设计意图和类是一样的。
当对象被创建之后,查看它们的原型的方法不止一种,以前一般使用对象的__proto__
属性,ES6推出后,推荐用Object.getPrototypeOf()
方法来获取对象的原型
function A(){ this.name='lala'; } var a=new A(); console.log(a.__proto__) //输出:Object {} //推荐使用这种方式获取对象的原型 console.log(Object.getPrototypeOf(a)) //输出:Object {}
无论对象是如何创建的,默认原型都是Object,在这里需要提及的比较特殊的一点就是,通过构造函数来创建对象,函数A本身也是一个对象,而A有两个指向表示原型的属性,分别是__proto__
和prototype
,而且两个属性并不相同
function A(){ this.name='lala'; } var a=new A(); console.log(A.prototype) //输出:Object {} console.log(A.__proto__) //输出:function () {} console.log(Object.getPrototypeOf(A)) //输出:function () {}
函数的的prototype
属性只有在当作构造函数创建的时候,把自身的prototype
属性值赋给对象的原型。而实际上,作为函数本身,它的原型应该是function
对象,然后function
对象的原型才是Object
。
总之,建议使用ES6推荐的查看原型和设置原型的方法。
其实原型和类的继承的用法是一致的:当你想用某个对象的属性时,将当前对象的原型指向该对象,你就拥有了该对象的使用权了。
function A(){ this.name='world '; } function B(){ this.bb="hello" } var a=new A(); var b=new B(); //将b设置为a的原型,此处有一个问题,即a的constructor也指向了B构造函数,可能需要纠正 Object.setPrototypeOf(a,b); a.constructor=A; console.log(a.bb); //hello
如果使用ES6来做的话则简单许多,甚至不涉及到prototype
这个属性
class B{ constructor(){ this.bb='hello' } } class A extends B{ constructor(){ super(); this.name='world'; } } var a=new A(); console.log(a.bb+" "+a.name); //hello world console.log(typeof(A)) //"function"
怎么样?是不是已经完全看不到原型的影子了?活脱脱就是类继承,但是你也看得到实际上类A 的类型是function
,所以说,本质上class
在JS中是一种语法糖,JS继承的本质依然是原型,不过,ES6引入class
,extends
来掩盖原型的概念也是一个很友好的举动,对于长期学习那些类继承为基础的面对对象编程语言的程序员而言。
我的建议是,尽可能理解原型,尽可能用class
这种语法糖。
好了,问自己两个问题:
为什么属性不放在原型上而方法要放在原型上?
构造函数.prototype.xxxx = vvv
Student.prototype = { sayHello : function(){}, study : function(){} };
什么是原型链?
凡是对象就有原型,那么原型又是对象,因此凡是给定一个对象,那么就可以找到他的原型,原型还有原型,那么如此下去,就构成一个对象的序列,称该结构为原型链。
每个实例对象都有一个__proto_
属性,该属性指向它原型对象,这个实例对象 的构造函数有一个原型属性prototype
,与实例的__proto__
属性指向同一个对象。当一个对象在查找一个属性的时, 自身没有就会根据__proto__
向它的原型进行查找,如果都没有,则向它的原型的原型继续查找,直到查到Object.prototype._proto_
为null
,这样也就形成了原型链
。
这个概念其实也变得比较简单,可以类比类的继承链条,即每个对象的原型往上追溯,一直到Object为止,这组成了一个链条,将其中的对象串联起来,当查找当前对象的属性时,如果没找到,就会沿着这个链条去查找,一直到Object,如果还没发现,就会报undefined
。
原型链的结构
凡是使用构造函数,创建出对象,并且没有利用赋值的方式修改原型,就说该对象保留默认的原型链。
默认原型链结构是什么样子呢?
function Person(){} var p = new Person(); //p 具有默认的原型链
默认的原型链结构就是:当前对象 -> 构造函数.prototype -> Object.prototype -> null
在实现继承的时候,有时候会利用替换原型链结构的方式实现原型继承,那么原型链结构就会发生改变
function DunizbCollection(){} DunizbCollection.prototype = []; var arr = new DunizbCollection();
此时arr对象的原型链结构被指向了数组对象的原型链结构了:arr -> [] -> Array.prototype -> Object.prototype -> null
用图形表示对象的原型链结构
以如下代码为例绘制原型链结构
function Person(){} var p = new Person();
原型链结构图为:
使用原型需要注意两点:
constructor
也会改变。实现继承有两种常见方式:
最简单的继承就是将别的对象的属性强加到我身上,那么我就有这个成员了。
混合式继承的简单描述:
function Person() {}; Person.prototype.extend = function ( o ) { for ( var k in o ) { this[ k ] = o[ k ]; } }; Person.prototype.extend({ run: function () { console.log( '我能跑了' ); }, eat: function () { console.log( '我可以吃了' ); }, sayHello: function () { console.log( '我吃饱了' ); } });
利用原型也可以实现继承,不需要在我身上添加任何成员,只要原型有了我就有了。
这种技术的基本思想相当简单,即在子类型构造函数的内部调用超类型构造函数,而函数只不过是在特定环境中执行代码的对象,因此通过使用apply()
和call()
方法也可以在(将来)新创建的对象上执行构造函数
function Person ( name, age, gender ) { this.name = name; this.age = age; this.gender = gender; } // 需要提供一个 Student 的构造函数创建学生对象 // 学生也应该有 name, age, gender, 同时还需要有 course 课程 function Student ( name, age, gender, course ) { Person.call( this, name, age, gender ); this.course = course; }
在《JavaScript高级程序设计(第三版)》中详细介绍了继承的6种方式
就是一个简单的函数调用。函数名的前面没有任何引导内容。
function foo () {} var func = function () {}; ... foo(); func(); (function () {} )();
this 的含义:在函数中 this
表示全局对象,在浏览器中式 window
方法一定式依附与一个对象,将函数赋值给对象的一个属性,那么就成为了方法。
function f() { this.method = function () {}; } var o = { method: function () {} }
this
的含义:这个依附的对象
创建对象的时候构造函数做了什么?由于构造函数只是给 this
添加成员,没有做其他事情。而方法也可以完成这个操作,就是 this
而言,构造函数与方法没有本质的区别。
特征:
new
关键字,来引导构造函数。this
与方法中的一样,表示对象,但是构造函数中的对象是刚刚创建出来的对象构造函数中不需要 return
,就会默认的 return this
。
return
,就相当于 return this
return
基本类型,无效,还是保留原来 返回 this
return null
,或 return undefined
,无效return
对象类型,那么原来创建的 this
就会被丢掉,返回的是 return
后面的对象上下文就是环境。就是自己定义设置 this 的含义。
语法
函数名.apply( 对象, [ 参数 ] )
;函数名.call( 对象, 参数 )
;描述
参数问题
无论是 call 还是 apply 在没有后面的参数的情况下(函数无参数,方法五参数)是完全一致的
function foo(){ console.log( this ); } foo.apply( obj ); foo.call( obj );
第一个参数的使用也是有规则的:
null
、undefined
等,那么相当于 this
默认为 window
foo(); foo.apply(); foo.apply( null );
在使用上下文调用的时候,原函数(方法)可能会带有参数,那么这个参数再上下文调用中使用 第二个(第 n 个)参数来表示
function foo( num ) { console.log( num ); } foo.apply( null, [ 123 ] ); // 等价于 foo( 123 );
看完上述内容,是不是对JavaScript面向对象是什么有进一步的了解,如果还想学习更多内容,欢迎关注创新互联行业资讯频道。