1.对象的基本操作 （CRUD）
1. 添加
// 1.添加属性
teacher.address = "北京"
// 2. 添加方法
teacher.drink = function(){
console.log("I am drinking beer")
}
2. 查找
// 1. 属性查找
teacher.name
// 2. 方法查找
teacher.teach()
3. 删除
// 删除属性
delete teacher.address
// 删除方法
delete teacher.teach
(2) 创建对象方法
var obj = new Object();
2. var obj = {}
3. 自定义构造函数var teacher = { name:'张三', age:32, sex:'male', height:190, weight:140, teach:function(){ console.log('I am teach'); return 'teach'; }, smoke:function(){ console.log('smoke'); return 'smoke'; }, eat:function(){ console.log('eat'); } } // 查 console.log(teacher.age); teacher.teach(); console.log(teacher.smoke()); // 增 teacher.address = '北京'; console.log(teacher.address); teacher.drink = function(){ return 'drink'; } console.log(teacher.drink()); //改 teacher.age = 18; console.log(teacher.age); teacher.eat = function(){ console.log('noeat'); // return 'noeat'; } teacher.eat(); //删除 delete teacher.weight; //删除方法 delete teacher.smoke; console.log(teacher);构造函数
自定义构造函数 首字母需要大写
(3) 构造函数
1. 大驼峰与普通函数表面上的区别
2. 只有 new 了构造函数之后才会有实例 在没有执行之前就不存在this,
3. this 指向的是对象
4. 通过一个构造函数实例化出来的两个对象之间没有关系，是完全不同的两个对象function Teacher() { this.name = '张三'; //是谁构造了函数（new Teacher） this 就是等于谁 此时 this 是 teacher1 this.sex = '男生'; this.smoke = function (){ console.log('I am someking'); } } var teacher1 = new Teacher();```javascript function Teacher(opt) {
this.name = opt.name; this.sex = opt.sex; this.weight = opt.weight; this.smoke = function () { this.weight--; console.log(this.weight); } this.eat = function () { this.weight++; console.log(this.weight); }}
var t1 = new Teacher({
name:'张三', // sex:'男', weight:146, course:'js'}) var t2 = new Teacher({
name:'李四', sex:'女', weight:130, course:'java'}); console.log(t1); console.log(t2);
<a name="Yxm6v"></a>
### 课后作业：
<a name="h315A"></a>
#### 1.写一个构造函数,接收数字类型的参数,参数数量不定,完成参数相加和相乘的功能
```javascript
function NumFn() {
var val = arguments, sum;
this.add = function () {
sum = 0;
loop('add', sum); // 第一个参数传 算术运算的类型 第二参数：存放数据的初始值
// return loop;
};
this.mul = function () {
sum = 1;
loop('mul', sum); // 第一个参数传 算术运算的类型 第二参数：存放数据的初始值
// return loop;
}
function loop(method, res) {
for (var i = 0; i < val.length; i++) {
var item = val[i];
if (method === 'add') {
res += item;
}
if (method === 'mul') {
res *= item;
}
}
console.log(res);
return res; // 返回计算的结果
}
}
var test = new NumFn(6,7,8);
test.add();
test.mul();
写法二 调用时传参arguments 写法
function Compute() {
var res = 0;
this.plus = function () {
loop(arguments,'add',res);
}
this.times = function () {
res = 1;
loop(arguments,'mul',res);
}
function loop(args,method,res) {
for(var i = 0;i<args.length;i++){
var item = args[i];
if(method==='add'){
res+=item;
}else if(method==='mul'){
res*=item;
}
}
// return res;
console.log(res);
}
}
var compute = new Compute();
compute.plus(2,4,6);
compute.times(7,9,2);
写法三 调用时传形参实参写法
function Compute() {
var res = 0;
this.plus = function (val) {
console.log(val);
loop(val,'add',res);
}
this.times = function (val) {
res = 1;
console.log(val);
loop(val,'mul',res);
}
function loop(args,method,res) {
for(var i = 0;i<args.length;i++){
var item = args[i];
if(method==='add'){
res+=item;
}else if(method==='mul'){
res*=item;
}
}
// return res;
console.log(res);
}
}
var compute = new Compute();
compute.plus([2,4,6]);
compute.times([7,9,2]);
2.写一个构造车的函数，可设置车的品牌，颜色，排量。
再写一个构造消费者的函数，设置用户的名字,年龄，收入，通过选择的方法实例化该用户喜欢的车，再设置车的属性。
function Car(opt) {
this.carname = opt.name;
this.carcolor = opt.color;
this.dis = opt.dis;
}
function Person(opt) {
this.name = opt.name;
this.age = opt.age;
this.income = opt.income;
this.selectCar = function () {
var mycar = new Car(opt.carOpt); //** 注意是 opt.carOpt
console.log(`${this.name}选择了一辆${mycar.carname}颜色为${mycar.carcolor}排量为${mycar.dis}`);
}
}
var test = new Person({
name:'lmy',
age:23,
income:'18k',
carOpt:{
name:'宝马',
color:'黑色',
dis:'2'
}
})
test.selectCar();
引 js构造函数的定义
构造函数的定义
1、什么是构造函数
在 JavaScript 中，用 new 关键字来调用的函数，称为构造函数。构造函数首字母一般大写
2、为什么要使用构造函数？
举个例子，我们要录入一年级一班中每一位同学的个人信息，那么我们可以创建一些对象，比如：
var p1 = { name: 'zs', age: 6, gender: '男', hobby: 'basketball' };
var p2 = { name: 'ls', age: 6, gender: '女', hobby: 'dancing' };
var p3 = { name: 'ww', age: 6, gender: '女', hobby: 'singing' };
var p4 = { name: 'zl', age: 6, gender: '男', hobby: 'football' };
像上面这样，我们可以把每一位同学的信息当做一个对象来处理。但是，我们会发现，我们重复地写了很多无意义的代码。比如 name、age、gender、hobby 。如果这个班上有60个学生，我们得重复写60遍。
这个时候，构造函数的优势就体现出来了。我们发现，虽然每位同学都有 name、gender、hobby这些属性， 但它们都是不同的，那我们就把这些属性当做构造函数的参数传递进去。而由于都是一年级的学生，age 基本都是6岁，所以我们就可以写死，遇到特殊情况再单独做处理即可。此时，我们就可以创建以下的函数：
var p1 = new Person('zs', '男', 'basketball');
var p2 = new Person('ls', '女', 'dancing');
var p3 = new Person('ww', '女', 'singing');
var p4 = new Person('zl', '男', 'football');
此时你会发现，创建对象会变得非常方便。所以，虽然封装构造函数的过程会比较麻烦，但一旦封装成功，我们再创建对象就会变得非常轻松，这也是我们为什么要使用构造函数的原因。
在使用对象字面量创建一系列同一类型的对象时，这些对象可能具有一些相似的特征(属性)和行为(方法)，此时会产生很多重复的代码，而使用构造函数就可以实现代码复用。
3、构造函数的执行过程
先说一点基本概念。
function Animal(color) {
this.color = color;
}
当一个函数创建好以后，我们并不知道它是不是构造函数，即使像上面的例子一样，函数名为大写，我们也不能确定。只有当一个函数以 new 关键字来调用的时候，我们才能说它是一个构造函数。就像下面这样：
var dog = new Animal("black");
以下我们只讨论构造函数的执行过程，也就是以 new 关键字来调用的情况。
我们还是以上面的 Person 为例。
以上就是构造函数的整个执行过程。
4、构造函数的返回值
构造函数执行过程的最后一步是默认返回 this 。言外之意，构造函数的返回值还有其它情况。下面我们就来聊聊关于构造函数返回值的问题。
(1) 没有手动添加返回值，默认返回 this
function Person1() {
this.name = 'zhangsan';
}
var p1 = new Person1();
按照上面讲的，我们复习一遍。首先，当用 new 关键字调用时，产生一个新的内存空间 #f11，并标记为 Person1 的实例；接着，函数体内部的 this 指向该内存空间 #f11；执行函数体内部的代码；由于函数体内部的this 指向该内存空间，而该内存空间又被变量 p1 所接收，所以 p1 中就会有一个 name 属性，属性值为 ‘zhangsan’。
p1: {
name: 'zhangsan'
}
(2) 手动添加一个基本数据类型的返回值，最终还是返回 this
function Person2() {
this.age = 28;
return 50;
}
var p2 = new Person2();
console.log(p2.age); // 28
p2: {
age: 28
}
(3) 手动添加一个复杂数据类型(对象)的返回值，最终返回该对象 (返回引用型数据 会改变返回值)
直接上例子
function Person3() {
this.height = '180';
return ['a', 'b', 'c'];
}
var p3 = new Person3();
console.log(p3.height); // undefined
console.log(p3.length); // 3
console.log(p3[0]); // 'a'
再来一个例子
function Person4() {
this.gender = '男';
return { gender: '中性' };
}
var p4 = new Person4();
console.log(p4.gender); // '中性'
(4)构造函数首字母必须大写吗？
(5)不用new关键字，直接运行构造函数，是否会出错？如果不会出错，那么，用new和不用new调用构造函数，有什么区别？
使用new操作符调用函数
例子：
function Person(name){
this.name = name;
this.say = function(){
return "I am " + this.name;
}
}
var person1 = new Person('nicole');
person1.say(); // "I am nicole"
用new调用构造函数，函数内部会发生如下变化：
创建一个this变量，该变量指向一个空对象。并且该对象继承函数的原型；
属性和方法被加入到this引用的对象中；
隐式返回this对象（如果没有显性返回其他对象(引用型数据)）
用伪程序来展示上述变化：
function Person(name){
// 创建this变量，指向空对象
var this = {};
// 属性和方法被加入到this引用的对象中
this.name = name;
this.say = function(){
return "I am " + this.name;
}
// 返回this对象
return this;
}
可以看出，用new调用构造函数，最大特点为，this对象指向构造函数生成的对象，所以，person1.say()会返回字符串： “I am nicole”。
小贴士
如果指定了返回对象，那么，this对象可能被丢失。
function Person(name){
this.name = name;
this.say = function(){
return "I am " + this.name;
}
var that = {};
that.name = "It is that!";
return that;
}
var person1 = new Person('nicole');
person1.name; // "It is that!"
直接调用函数
如果直接调用函数，那么，this对象指向window，并且，不会默认返回任何对象（除非显性声明返回值）。
还是拿Person函数为例，直接调用Person函数：
var person1 = Person('nicole');
person1; // {name: "It is that!"}
window.name; // nicole
5.小结
为了防止因为忘记使用new关键字而调用构造函数，可以加一些判断条件强行调用new关键字，代码如下：
function Person(name){
if (!(this instanceof Person)) {
return new Person(name);
}
this.name = name;
this.say = function(){
return "I am " + this.name;
}
}
var person1 = Person('nicole');
console.log(person1.say()); // I am nicole
var person2 = new Person('lisa');
console.log(person2.say()); // I am lisa
若有收获，就点个赞吧
0 人点赞
