js对象_box=new object-CSDN博客

本文链接：https://blog.csdn.net/u010242159/article/details/52401580

【场景1】

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//创建一个对象，然后给这个对象新建属性和方法。
var box = new Object(); //创建一个Object 对象
box.name = 'Lee'; //创建一个name 属性并赋值
box.age = 100; //创建一个age 属性并赋值
box.run = function () { //创建一个run()方法并返回值
return this.name + this.age + '运行中...';
};
console.log(box.run()); //输出属性和方法的值
　　</script>
</head>
<body>
</body>
</html>

总结：上面创建了一个对象，并且创建属性和方法，在run()方法里的this，就是代表box 对象本身。js创建对象最基本的方法，但有个缺点，想创建多个类似的对象，就会产生大量的代码。

【场景2】

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var person=new Object();
person.name="张三";
Object.prototype.age="22"; // 如果这样person.prototype.age="11";错误的;
person.run=function(action)
{
person.address="上海市";
console.log("RUN里面：name:"+this.name+" age:"+person.age+" action:"+action);
}
console.log("姓名："+person.name+" 年龄："+Object.prototype.age+" 地址1："+person.address+" 地址2："+Object.prototype.Address);
person.run(" run action 方法一"); //如果这样Object.prototype.person.run(" run action 方法二");错误
　　</script>
</head>
<body>
</body> </html>

//为了解决多个类似对象声明的问题，我们可以使用一种叫做工厂模式的方法，这种方法就是为了解决实例化对象产生大量重复的问题。

//工厂模式解决了重复实例化的问题，但是它有许多问题，创建不同对象其中属性和方法都会重复建立，消耗内存；还有函数识别问题等等。

【场景3】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>

function createObject(name, age) { //集中实例化的函数
var obj = new Object();
obj.name = name;
obj.age = age;
obj.run = function () {
return this.name + this.age + '运行中...';
};
return obj;
}
var box1 = createObject('Lee', 100); //第一个实例
var box2 = createObject('Jack', 200); //第二个实例
console.log(box1.run());
console.log(box2.run()); //保持独立
　　</script>
</head>
<body>
</body>
</html>

【场景4】
//为了解决多个类似对象声明的问题，我们可以使用一种叫做工厂模式的方法，这种方法就是为了解决实例化对象产生大量重复的问题。
//工厂模式解决了重复实例化的问题，但是它有许多问题，创建不同对象其中属性和方法都会重复建立，消耗内存；还有函数识别问题等等。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function Box(name,age)
{
this.name=name;
this.age=age;
this.run=function(){
return this.name + this.age + '运行中...';
}
}
var box1=new Box('张三','11');
var box2=new Box('李四','22');
console.log(box1.run());
console.log(box2.run());
　　</script>
</head>
<body>
</body>
</html>

总结：

构造函数可以创建对象执行的过程：

1）当使用了构造函数，并且new 构造函数()，那么就后台执行了new Object()

2）将构造函数的作用域给新对象，(即new Object()创建出的对象)，而函数体内的this 就代表new Object()出来的对象。

3）执行构造函数内的代码；

4）返回新对象(后台直接返回)。

注：

1）构造函数和普通函数的唯一区别，就是他们调用的方式不同。只不过，构造函数也是函数，必须用new 运算符来调用，否则就是普通函数。

2）this就是代表当前作用域对象的引用。如果在全局范围this 就代表window 对象，如果在构造函数体内，就代表当前的构造函数所声明的对象。

这种方法解决了函数识别问题，但消耗内存问题没有解决。同时又带来了一个新的问题，全局中的this 在对象调用的时候是Box 本身，而当作普通函数调用的时候，this 又代表window。即this作用域的问题。

原型
我们创建的每个函数都有一个prototype(原型)属性，这个属性是一个对象，它的用途是包含可以由特定类型的所有实例共享的属性和方法。逻辑上可以这么理解：prototype 通过调用构造函数而创建的那个对象的原型对象。使用原型的好处可以让所有对象实例共享它所包含的属性和方法。也就是说，不必在构造函数中定义对象信息，而是可以直接将这些信息添加到原型中。

function Box() {} //声明一个构造函数
Box.prototype.name = 'Lee'; //在原型里添加属性
Box.prototype.age = 100;
Box.prototype.run = function () { //在原型里添加方法
return this.name + this.age + '运行中...';
};
构造函数的声明方式和原型模式的声明方式存储情况如下：

js面向对象深入理解
所以，它解决了消耗内存问题。当然它也可以解决this作用域等问题。

我们经常把属性（一些在实例化对象时属性值改变的），定义在构造函数内；把公用的方法添加在原型上面，也就是混合方式构造对象（构造方法+原型方式）：

var person = function(name){
this.name = name
};
person.prototype.getName = function(){
return this.name;
}
var zjh = new person(‘zhangjiahao’);
zjh.getName(); //zhangjiahao

【场景5】

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>

var person=function(name) //也可以写成function person(name)
{
this.name=name;
}
var p1=new person('张三');
console.log(p1.name);
person.prototype.getName=function(){
return this.name;
}
console.log(p1.getName());

　　</script>
</head>
<body>

</body>

</html>