<script src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>
<p><button οnclick="see();">按钮</button></p>
</body>
<script type="text/javascript">
/* 下段代码展示了如何在javaScript中定义一个类来表示2D平面几何中的点.
* 这个类实例化的对象拥有一个名为r()的方法,用来计算该点到原点的距离.
* prototye属性: 向对象添加属性和方法。
*/
// 定义一个构造函数以初始化一个新的Point对象
function Point(x,y){ // 按照惯例,构造函数均以大写字母开始
this.x = x ; // 关键字this指代初始化的实例
this.y = y ; // 将函数参数存储为对象的属性
} // 不需要return
// 通过prototye属性来给Point对象注入成员；此处出入了一个名为r的接口；
Point.prototype.r = function(){
return Math.sqrt(
this.x * this.x + // this指代当前调用这个方法的对象；
this.y * this.y // 返回x² + y² 的平方根
);
};
/**
* 使用new关键字和构造函数来创建一个实例
* 说明：在new关键字创建Point对象时会先去出掉用Point对象的构造函数来对其进行初始化；
* @type {Point}
*/
var p = new Point(1,1); // 平面几何中的点(1,1)
// Point类的实例对象p(以及所有的Point实例对象)继承了方法r()
p.r(); // 1.414
// 调用实现
function see(){
alert(p.r());
}
</script>
以下是JavaScript创建对象的一些基础形式；列出一些小Demo供大家参考：
1. 可以使用Object类来实例化一个对象；
其中：Object是javascript内置对象；可以通过Object类来派生所有其他的对象、属性以及方法；
以下是对应的语法Demo：
// 通过Object类实例化一个person对象；
var person = new Object();
// 为person对象创建一个name属性；并为其赋值；
person.name = "Mr's Wang";
// 为person对象创建一个age属性；并为其赋值；
person.age = 60;
// 为person对象创建一个playBasketball()方法；
person.playBasketball = function(){
// Codding......
// 在对象的引用中可以使用this关键字；但是在引用之外使用this关键字将无法指向对应的成员属性；
console.log(this.name);
}
2. 可以通过预定义的方式创建对象；
// 花括号标示创建了一个对象；
var obj = {};
// 直接通过对象.属性可以为对象创建属性；恒等=为为对象赋值；
obj.name = "Mr's Wang";
obj.age = 60;
/**
* 这种方式简单粗暴，可以直接为对象赋值属性及方法；以下便是对应的赋值语法；
* 其中需要注意的是该对象是在引用之后使用的this；在没有具体引用的情况下this是没有具体指向的；
*/
obj.playBasketball = function(){
console.log(this.name);
console.log(this.age);
}
// 直接调用obj对象的方法；
obj.playBasketball();
/**
* 当然，上面的方式是拆分式写法；可以将所有的对象属性当做一个类结构进行编写；
* 具体格式如下：
*/
var objs = {
name : "Mr's XiaoWang",
age : 35,
playBasketball:function(){
// Codding ...
console.log(this.name);
console.log(this.age);
}
};
objs.playBasketball();
3. 第三种方式可以直接用构造函数的方式预设参数；然后初始化的同时创建对象；
// 需要注意一点：按照惯例构造方法以首字母大写打头；
function Obj(name,age){
// 关键字this指代所初始化的实例；
this.name = name;
this.age = age;
this.playBasketball = function(){
// Codding ...
console.log(name);
console.log(age);
}
}
// 实例化对象；利用构造器初始化对象；
var obj = new Obj("Mr's Wang",80);
// 调用Obj对象的playBasketball();
obj.playBasketball();
4. 其实这种方式属于对象的封装性处理；对于对象的调用提供了更多的方便；
// 将对象封装到person接口中；通过调用接口来实例化并返回一个既定结构的对象；
function person(name,age){
// 通过Object类实例化一个person对象；
var person = new Object();
// 为person对象创建属性；并为其赋值；
person.name = name;
person.age = age;
// 为person对象创建一个playBasketball()接口；
person.playBasketball = function(){
// 实现接口；
// Codding ...
console.log(person.name);
console.log(person.age);
}
// 最终返回person对象；
return person;
}
/**
* 调用person实例化接口；得到一个person对象；
* 这个对象名可以是任意的名字；
*/
var person = person("Mr's Liu",76);
// 通过得到的person对象调用接口中所实例对象的成员；此处调用的实例化接口中对象的playBasketball();
person.playBasketball();