js中面向对象--继承方式/普通函数与构造函数区别

责编:menVScode 2017-09-03 17:57 阅读(909)

        在面向对象语言中,不存在独立的函数,所有的函数必须是某个对象的方法。

        js中面向对象是基于原型构建的,查看此篇文章《js面向对象的实现原理》,可能会对本文学习理解有一定帮助。

        this继承方式

//定义一个类,也就是构造函数
function Person(){
	this.name = 'manvscode.com';
	this.age = 1;
	}
var p = new Person();//创建构造函数
//执行new Person()代码:1创建实例对象,2调用当前的构造函数
//构造函数里的this,最终指向当前函数创建的实例对象
console.log(p.age);//1

        执行new Person()代码:1、创建实例对象,2、调用当前的构造函数 ,将实例对象的引用给到p;构造函数里的this,最终指向当前构造函数创建的实例对象。

QQ截图20170903173501

        this继承方式缺点,如果要创建百个千个就也会创建千百个内存地址,这样会给内存带来负担。

QQ截图20170903184345


        prototype继承方式

        prototype:函数对象所拥有的属性。

        调用p.work()的时候,首先在实例对象中找有没有work这个方法,若找到的话,直接调用;若没有找到,就通过__proto__与实例对象关联起来的原型对象中去查找;

//定义一个类,也就是构造函数
function Person(){
}
Person.prototype.name='menvscode.com';
Person.prototype.work=function(){
	return 'working...';
}
var p = new Person();//创建构造函数
console.log(p.work());

QQ截图20170903201150


        普通函数与构造函数的区别

相同点:

        1、通过function来进行声明的;

        2、在内存堆中都会开辟一块内存空间;

        3、都是属于函数对象;

不同点:

        1、构造函数通过new命令来创建实例对象,普通函数通过"函数名()"来调用;

        2、构造函数命名是首字母大写了;

        3、构造函数中给return返回值,是毫无意义的但不会报错;


        constructor属性:所有对象都拥有的属性

function Person(){ }
Person.prototype.name='menvscode.com';
Person.prototype.work=function(){
	return 'working...';
}
/*
	Person.prototype={
		name:'menvscode.com',
		work:function(){
			return 'working...';
		}
	}
	Person.prototype.constructor = Person;
*/ 
var p = new Person();
console.log(Person.prototype.constructor);// function Person(){}
console.log(p.constructor);// p的构造对象是:function Person(){}
console.log(Person.constructor);// function Function() {[native code]},Person是Function的实例对象


        对象

原始数据类型:

        Object:创建对象的方式,字面量方式 { },构造函数方式 new Object( );

        Function:字面量方式 function(){},构造函数方式 new Function( );

        Array:字面量方式 [ ],构造函数方式 new Array( );

        Boolean:字面量方式 false、true,构造函数方式 new Boolean( );

        Number:字面量方式 1 数字,构造函数方式 new Number( );

        String:字面量方式 'menvscode',构造函数方式 new String( );

        对象分类

本地对象:Object、Function、Array、Boolean、Number、String、Date、Regexp、Error...

内置对象:

        Math(Math.random()),Math的构造函数是Object,使用是Math的时候不需要new命令来创建实例对象。

        全局对象Global:

QQ截图20170903220219

宿主对象:

        DOM:文档对象模型,核心对象是document(Element对象);

        BOM:浏览器对象模型,核心对象是window;

自定义对象:

        比如上面代码中 var p = new Person(); p就是自定义对象。

前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码