JS高级一_js $.raysbox-CSDN博客

本文链接：https://blog.csdn.net/Rayshaan/article/details/110149702

2020.11.25

js高级

01创建对象的方法

1.直接创建对象

var obj={name:'姓名',age:'年龄'}

2.工厂方式创建对象

function Student(name,age){
	return {
			name:name,
			age:age
	}
}
var stu=Student('姓名',20);

3.构造函数方式

function Student(name,age){
	this.name=name;
	this.age=age;
}
//实例化对象
var stu1=new Student('张三',20,19990101);
var stu2=new Student('李四',20,20000101);

02this的指向

1.this在普通位置一般指向的是window
2.在基本对象内部this指的是当前的对象(谁调用this指谁)
3.构造函数中的this指的是当前实例化对象

03认识构造函数

构造函数的首字母一般大写

//如果是构造函数，函数名一般大写。
function Student(name,age){
	this.name=name;
	this.age=age;
	this.eat=function(){
	//构造函数中的this指的是当前实例化对象
		console.log(this)
	}
}
// 实例化对象
var stu=new Student('zs',20);
stu.eat();

04构造函数应用和构造函数+原型方式

每一个构造函数，都有一个prototype属性(prototype是构造函数的属性，prototype自身是一个对象)，该属性的所有方法和属性都能被构造函数继承。

例如:买商品

function Product(title,price){
    this.title=title;
    this.price=price;
    this.buy=function(){
        console.log('买了'+this.title+'花了'+this.price);
    }
}
var flight=new Product('无人机',4999);
var mz=new Product('口红',399);
flight.buy();
mz.buy();
//输出
//买了无人机花了4999
//买了口红花了399

缺点:存储的地址不一样。执行的功能一样。每次实例化对象的时候，都会生成一个buy方法，造成资源的浪费。

改进:

function Product(title,price){
    this.title=title;
    this.price=price;
    /*this.buy=function(){
        console.log('买了'+this.title+'花了'+this.price);
    }*/
}
Product.prototype.buy=function(){
	console.log('买了'+this.title+'花了'+this.price);
}
var flight=new Product('无人机',4999);
var mz=new Product('口红',399);
flight.buy();
mz.buy();
//两个对象本身没有方法，共用prototype的buy方法

如果实例对象没有自己对应的方法，会去构造函数的prototype内部寻找。如果能找到，就会执行该方法。

一般会把属性放置在构造函数内部，方法类的放在原型里面。这种方法封装的就称为构造函数+原型方式

05构造函数相关概念

1.this指向

function Product(title,price){
	this.title=title;
	this.price=price;
	this.joinCar=function(){
		console.log('构造函数里的this.title:'+this.title);
	}
}
Product.prototype.buy=function(){
	console.log('构造函数的prototype里的this.title:'+this.title);
}
var f=new Product('无人机',5999);
f.buy();
f.joinCar();

输出:
在这里插入图片描述
两个this的title都是无人机，可知两个this指的都是实例化对象

//实例对象的__proto__指向构造函数的prototype
 console.log(f.__proto__==Product.prototype);//输出true

实例对象的__proto__指向构造函数的prototype(可以通过实例化对象的__proto__修改构造函数的某一方法)

2.constructor

var arr=new Array(10,20,30);
 // 可以通过constructor找到实例对象所属的构造函数
console.log(arr.constructor==Array);//true
console.log(m.constructor==Product);//true

// constructor在某些情况下没有那么靠谱,不好用
// 官方推荐 使用 a instanceof b 判断a是否是b的实例对象
console.log( arr instanceof Array)

06构造函数的constructor

function Product(title,price){
	this.title=title;
	this.price=price;
	this.joinCar=function(){
		console.log(this.title);
	}
}
Product.prototype={
	buy:function(){
		console.log('买');
	},
	joinCar:function(){
		console.log('加购物车');
	}
}
var p=new Product('口红',399);
console.log(p.constructor);
console.log(Product.prototype);

输出:
在这里插入图片描述
此时constructor指向obj，因为Product.prototype={｝相当于重写了Product.prototype 丢失了constructor属性
改进:

function Product(title,price){
	this.title=title;
	this.price=price;
	this.joinCar=function(){
		console.log(this.title);
	}
}
/*Product.prototype={
	buy:function(){
		console.log('买');
	},
	joinCar:function(){
		console.log('加购物车');
	}
}*/
Product.prototype.buy=function(){
	console.log(this);
}
var p=new Product('口红',399);
console.log(p.constructor);
console.log(Product.prototype);

改进后输出:
在这里插入图片描述
如果丢失了constructor想要重新获得(确认要使用constructor时)，可以补写：

Product.prototype={
	constructor:Product
}

07.构造函数的应用场景

电商网站购物

<body>
	<h3 id="title">标题</h3><br>
	京东价<p id="price"></p><br>
	选择颜色<p id="color"></p>
		
	<script>
		function Product(title,price,color){
   			this.title=title;
    		this.price=price;
    		this.color=color;   
		}
		// 数据在实际开发过程中，需要去后端请求
		var p=new Product('kouhong',2199,['粉色','白色']);
		title.innerHTML=p.title;//直接通过元素的id选中元素
		price.innerHTML=p.price;
		for(var i in p.color){//遍历颜色数组
			color.innerHTML+=p.color[i];
		}
	</script>
</body>