1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > JavaScript面向对象之构造函数

JavaScript面向对象之构造函数

时间:2021-05-25 08:30:47

相关推荐

JavaScript面向对象之构造函数

下面是对JavaScript面向对象中构造函数的整理,希望可以帮助到有需要的小伙伴

JavaScript面向对象之构造函数

构造函数可以帮你构造出你喜欢的任何一个对象,给构造函数属性和方法,构造函数都能帮你办到。

快来看看吧!

构造函数又称为构造器或模板,是对象中的一个方法,在实例化时构造器被调用。在JavaScript中函数就可以作为构造器使用,因此不需要特别定义一个构造器方法。

function Person() {console.log('Person instanitated');}var person = new Person();

这里的Person()并不作为函数,而是构造函数。创建Person对象需要使用new关键字。

1、构造函数的属性

构造函数的属性实际上就是对象的变量。

一个对象可以包含多个属性,定义构造函数的属性时使用this关键字

function Person(firstName) {this.firstName = firstName;console.log('Person instantiated');}var person = new Person('Alice');console.log("Person is" + Person.firstName);

2、构造函数的方法

构造函数的方法就是对象的函数

一个对象可以包含多个函数,定义构造函数的方法时使用this关键字。

举例:

用构造函数创建一个英雄对象:

/*创建构造函数(类的概念) - 用于创建对象(需要定义属性和方法)function 构造函数名称() {this.属性名 = 属性值;thid.方法名 = function(){方法体}}*/// 创建构造函数function Hero(name){// 属性this.name = name;// 方法this.sayMe = function() {console.log('我是' + name);}}// 利用构造函数创建对象var hero = new Hero('孙悟空');console.log(hero);/*// 这种创建对象的方法不能重复用,效率低var obj = {name:'张无忌',sayMe:function(){console.log("我是张无忌");}}*/

输出:

Hero {name: '孙悟空', sayMe: [Function] }

3、this关键字

JavaScript有一套完全不同于其它语言的对 this 的处理机制。this 关键字本身没有任何含义,在如下几种不同的情况下,this 指向的各不相同。

全局范围内: this关键字会指向全局对象。

this.a = 10; // global.a = 10console.log(a); // 10

构造函数内:this关键字会指向新创建的对象。

构造函数的方法内:this关键字会指向当前对象。

var hero = {};hero.sayName = function(){return "hello " + this.name;};

4、函数与构造函数

构造函数中的属性或方法可以用函数方式或构造函数方式声明。可以用调用函数的方式调用构造函数也可以用调用构造函数的方式调用构造函数。

举例:

// 1.函数 2.构造函数function Hero(name) {// 1.函数var v = 100; // 局部变量function n(){} // 内部函数// 2.构造函数this.name = name; // 属性this.sayMe = function() {// 方法console.log('我是' + name);}}// 1.函数调用Hero();// 2.构造函数使用var hero = new Hero();// 用函数的方式声明变量,用构造函数的方式声明函数function fun(){// 函数var v = 100; // 局部变量// 构造函数this.get = function(){// 方法return v;}this.set = function(value){v = value;}}// 构造函数调用var f = new fun();console.log(f);console.log(f.get()); // 100f.set(200); console.log(f.get()); // 200

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