JS里声明函数有几种方式?

发布网友 发布时间:2022-04-24 09:05

我来回答

2个回答

懂视网 时间:2022-05-14 19:45

本篇文章给大家带来的内容是关于javascript对象声明有几种方式?javascript对象声明的六种方式 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

-- 新手向知识,就不用ES6写法了。

一、字面量声明

var obj = {
 属性名1 : 属性值,
 属性名2 : 属性值,
 属性名3 : 属性值,
 方法名1 : function() {
  .....
 },
 方法名2 : function() {
  .....
 }
 }

通过obj.属性名obj.方法名()就可以读取或调用对象的属性/方法了。

二、用new操作符构造Object对象

var obj = new Object();
obj.属性名1 = 属性值1;
obj.属性名2 = 属性值2;
obj.属性名3 = 属性值3;
obj.属性名4 = 属性值4;
obj.方法名1 = function() {
 ....
};
obj.方法名2 = function() {
 ....
};
....

首先用new Object()创建一个空对象,然后用多条语句给对象添加属性/方法。

三、用函数声明的方式构造对象

函数Function本身就是对象Object的实例

var fn = new Function(); //new一个空函数
function myFn() {}; //声明一个空函数
console.log(fn instanceof Object); //true
console.log(myFn instanceof Object); //true

所以可以模仿new Objcet()构造对象的方式,用function myFn() {}声明一个自定义的函数,然后通过new myFn()构造对象,比如:

function person(name, age) {
 this.name = name;
 this.age = age;
 this.say = function() {
  console.log('My name is '+ this.name + ', I'm ' + this.age + ' years old');
 }
 }
 var xiaoMing = new person('xiaoming', 16);
 xiaoMing.say(); //"My name is xiaoming, I'm 16 years old"

通过这种方式声明的对象,每一次new出来的对象都是的,互相不会有影响,属性、方法中的this指向的就是新创建的、调用他们的对象。

四、工厂模式声明对象

工厂模式声明对象可以理解成二、三两种方法的结合体,用三的思想套进二的内容。仿照上面例子举例:

function person(name, age) {
 var obj = new Object(); 
 obj.name = name;
 obj.age = age;
 obj.say = function() {
  console.log('My name is '+ obj.name + ', I'm ' + obj.age + ' years old');
 };
 return obj;
 }
 var xiaoMing = person('xiaoming', 16);
 xiaoMing.say(); //"My name is xiaoming, I'm 16 years old"
 var xiaoHong = person('xiaohong', 18);
 xiaoHong.say(); //"My name is xiaohong, I'm 18 years old"

工厂模式之所以叫工厂模式,就是类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果。他的写法与三、用函数声明的方式构造对象比较像,但是稍有不同。

每一次调用function 声明的函数时,它在内部new Object(),最后将这个新建的对象return回来,调用时就像普通函数调用一样,实例化的时候不用再new了(内部new过)。虽然多次调用该函数走的都是一样的流程,但是生产出来的两个产品互不影响。

五、原型方式声明对象

function person() {/*空*/};
 person.prototype.height = "1.80m";
 person.prototype.grade = "Senior 3";
 person.prototype.say = function() {
 console.log( 'I'm ' + this.height + ' tall and I'm in '+ this.grade);
 }
 var xiaoMing = new person();
 xiaoMing.say(); //"I'm 1.80m tall and I'm in Senior 3"

原型方式是将该对象的属性/方法写在他的prototype属性所指的对象上。(每一个函数或者说对象都有一个prototype属性,这个属性以对象的形式存在)。

每次new实际上有这么一些操作:

1)创建一个空对象
2)把这个空对象的__proto__指向构造函数的prototype
3)把这个空对象赋值给this
4)执行构造函数内的代码

new出来的新对象的__proto__属性都会指向person.prototype,然后就可以执行person.prototype上的函数内容了。

这有点像JS上常说的事件代理/委托。事件不直接绑定在该DOM元素上,而是绑定在它的父级元素,当给该DOM元素添加兄弟元素时,兄弟元素因为冒泡,能触发相同的事件。

六、混合模式

混合模式可以理解成原型模式+构造函数,举例:

function person(name, height) {
 this.name = name;
 this.height = height;
 };
 person.prototype.age = 18;
 person.prototype.grade = "Senior 3";
 person.prototype.say = function() {
 console.log('Hello, my name is ' + this.name + '. I'm ' + this.age + ' years old, ' + this.height + ' tall and I'm in '+ this.grade + '.');
 }
 var xiaoMing = new person('Xiaoming', '1.80m');
 xiaoMing.say();
 //"Hello, my name is Xiaoming. I'm 18 years old, 1.80m tall and I'm in Senior 3."
 var xiaoHong = new person('Xiaohong', '1.65m')
 xiaoHong.say();
 //"Hello, my name is Xiaohong. I'm 18 years old, 1.65m tall and I'm in Senior 3."

对比混合模式和原型模式可以发现,混合模式函数体不是空的,而函数体内的内容就是前边说的构造方式。

这种方式在实际开发中更加常用。

热心网友 时间:2022-05-14 16:53

JS函数的定义方式比较灵活,它不同于其他的语言,每个函数都是作为一个对象被维护和运行的。
先看几种常用的定义方式:
function func1([参数]){
/*函数体*/
}
var func2=function([参数]){
/*函数体*/
};
var func3=function func4([参数]){
/*函数体*/
};
var func5=new Function();
上述第一种方式是最常用的方式,不用多说。
第二种是将一匿名函数赋给一个变量,调用方法:func2([函数]);
第三种是将func4赋给变量func3,调用方法:func3([函数]);或func4([函数]);
第四种是声明func5为一个对象。
再看看它们的区别:
function func(){
//函数体
}
//等价于
var func=function(){
//函数体
}
但同样是定义函数,在用法上有一定的区别。
<script>
//这样是正确的
func(1);
function func(a)
{
alert(a);
}
</script>
<script>
//这样是错误的,会提示func未定义,主要是在调用func之前没有定义
func(1);
var func = function(a)
{
alert(a);
}
//这样是正确的,在调用func之前有定义
var func = function(a)
{
alert(a);
}
func(1);
</script>
用同样的方法可以去理解第三种定义方式。
第四种定义方式也是需要声明对象后才可以引用。

声明声明:本网页内容为用户发布,旨在传播知识,不代表本网认同其观点,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:11247931@qq.com