1.this
//注意:构造函数不能使用箭头函数定义
function Person(name,age){
//在构造函数中,this关键字,用于给类添加成员
this.name = name
this.age = age
this.sayHi = function(){
console.log(`大家好!我叫${this.name},今年${this.age}岁`);
}
}
//创建对象。该对象会拥有,类型中定义的所有成员。
let p1 = new Person('张三',20)
console.log(p1);
p1.sayHi()
let p2 = new Person('李四',24)
console.log(p2);
p2.sayHi()
console.log('---------------------');
let obj1 = {
//对象的两个属性
name:'周杰伦',
age:20,
//对象的方法
sayHi:function(){
//在方法中,this指向方法的调用者,谁在调用该方法,this就指向谁
//如果一个方法,不是由对象调用执行的,而是直接执行的,那么该方法里面的this
就执行window对象
console.log(`Hi!我是${this.name},今年${this.age}岁`);
},
sayHello:()=>{
//在箭头函数中没有this,如果在箭头函数中使用了this,它会向上一层函数中去找this
//如果上一层函数也是箭头函数,或者没有上一层函数了,这个时候this就指向
window对象。
console.log(`Hello!我是${this.name},今年${this.age}岁`);
}
}
obj1.sayHi()
let obj2 = {
name:'关晓彤',
age:22
}
//可以将obj1的函数传给obj2,其实是obj2的sayHi方法,指向obj1的方法
obj2.sayHi = obj1.sayHi
obj2.sayHi()
//将obj1身上的函数,传给了一个sayHi变量
let sayHi = obj1.sayHi
window.name = '小明' //设置window对象的name属性
window.age = 22 //设置window对象的age属性
sayHi()
console.log('-----------------');
obj1.sayHello()
obj2.sayHello = obj1.sayHello
obj2.sayHello()
let sayHello = obj1.sayHello
sayHello()
//var定义的成员(变量和方法)都会成为window对象的成员
var address = '安德门'
var showAddress = function(){
console.log(`地点在${this.address}`);
}
console.log(window);
showAddress()
window.showAddress()
console.log('-----------------');
// 定义一个对象
let obj1 = {
name:'鹿晗',
age:30,
//自我介绍方法
sayHi:function(){
console.log(`Hi!我叫${this.name},今年${this.age}岁`);
},
showMyFriend(){
// 备份this
//let that = this
return {
name:'关晓彤',
age:20,
sayHi(){
console.log(`Hi!我叫${this.name},今年${this.age}岁`);
},
//介绍鹿晗
showlh:()=>{
//console.log(`Hi!我的男朋友叫${that.name},今年${that.age}岁`);
console.log(`Hi!我的男朋友叫${this.name},今年${this.age}岁`);
}
}
}
}
obj1.sayHi()
let obj2 = obj1.showMyFriend()
obj2.sayHi() //调用自我介绍的方法
obj2.showlh() //调用介绍鹿晗的方法
// obj1.showMyFriend().sayHi()
2.call apply bind
//call apply bind 更改方法里面this的指向
let obj1= {
name:'李现',
age:30,
sayHi(a,b){
console.log(`Hi!我叫${this.name},今年${this.age}岁。${a}-${b}`);
}
}
let obj2 = {
name:'彭于晏',
age:32
}
//使用call()改变方法里面,this的指向
//call()方法的第一个参数必须是指定的对象,方法的原有参数,挨个放在后面
obj1.sayHi.call(obj2,200,100)
let obj3 = {
name:'胡歌',
age:35
}
//使用apply(),也可以改变方法里面this的指向,第一个参是指定的对象,方法的原有
参数,统一放到第二个数组参数中。
obj1.sayHi.apply(obj3,[200,100])
let obj4 = {
name:'胡军',
age:40
}
//使用bind(),也可以改变方法里面this的指向,用法给call()一样
//call()是直接运行方法,bind()是返回新的方法,然后再重新调用。
obj1.sayHi.bind(obj4,200,100)()
3.将一个对象转为字符串
//定义一个对象
let obj1 = {}
//给对象添加属性有两种方式:1.对象名.属性名 2.对象名["属性名"]
obj1.name = '张三'
console.log(obj1);
obj1['age'] = 20
console.log(obj1);
console.log('--------------------');
//定义一个手机对象
let phone = {
name: "小米10",
color: '红色',
size: '1000*200*500',
price: '2999'
}
//转成下面的字符串
//"name=小米10&color=红色&size=1000*200*500&price=2999"
//for in 循环,可以循环出对象里面的所有的key,(key就是属性名)
//方式一:
let arr = [] // 定义一个空数组
for(let key in phone){
//获取对象的属性值,可以通过['属性名']
arr.push(key+'='+phone[key])
}
let str1 = arr.join('&')
console.log(str1);
//方式二
//Object.keys(指定的对象),该方法可以获取指定对象的所有key,返回值是一个数组
let keys = Object.keys(phone)
//Object.values(指定的对象),该方法可以获取指定对象的所有的value,返回值是一个数组
//let values = Object.values(phone)
let arr2 = keys.map(function(k){
return [k,phone[k]].join('=')
})
let str2 = arr2.join('&')
console.log(str2);
//方法二:简化写法
let str3 = Object.keys(phone).map(k=>[k,phone[k]].join('=')).join('&')
console.log(str3);
4.将字符串转为对象
//调用kai.js(具体代码在下文5.封装js库中)
<script src="./js/kai.js"></script>
<script>
//定义一个字符串
let str = "name=小米10&color=红色&size=1000*200*500&price=2999"
//转成一个对象
/* {
name: "小米10",
color: '红色',
size: '1000*200*500',
price: '2999'
} */
let obj2 = {} //定义一个空对象
str.split('&').forEach(r=>{
let arr=r.split('=')
// arr=>['name','小米10']
// obj['name'] = '小米10'
obj2[arr[0]] = arr[1]
})
console.log(obj2);
console.log('----------------------------------');
let obj3 = {
name:'周杰伦',
age:20,
sex:'男',
job:'歌手'
}
console.log($b.objectToStr(obj3));
console.log($b.objectToStr(obj3,'@'));
console.log($b.objectToStr(obj3,'哈哈'));
let str2 = 'name=周杰伦&age=20&sex=男&job=歌手'
console.log($b.strToObject(str2));
console.log($b.strToObject(str2,'&'));
let str3 = 'name=谢霆锋@age=21@sex=男@job=厨师'
console.log($b.strToObject(str3,'@'));
</script>
5.封装js库
//kai.js文件
let $b = {
//将对象转为字符串
objectToStr:(obj,split='&') => Object.keys(obj).map(k=>[k,obj[k]].join('=')).join(split),
//将字符串转为对象
strToObject:(str,split='&')=>{
let obj = {} //定义一个空对象
str.split(split).forEach(r=>{
let arr = r.split('=')
obj[arr[0]] = arr[1]
})
return obj
}
}
6.练习
1.统计字符串中每个字符串出现的次数
//字符串
let str = "fasdfsadfsegsageqwgersfdhrhdfsergterwhefweteqheq"
//转成下面格式的对象
/*{
a:5,
b:7,
c:9,
...
} */
let obj = {}
// 循环字符串中的所有的字符串
for(let i=0;i<str.length;i++){
//根据字符的名称,查找对象中,有没有对应的属性
if(obj[str[i]]){
//如果有,对应的属性值加1
obj[str[i]]++
}
else{
//如果没有,添加这个属性,属性值赋为1
obj[str[i]] = 1
}
}
console.log(obj);
console.log('-----------------------');
2.找出出现次数最多的字符
//定义一个出现次数最多的字符对象
let max = {
name:'',
count:0
}
Object.keys(obj).forEach(k=>{
//判断是否有别的字符串大于max
if(obj[k]>max.count){
max.name = k
max.count = obj[k]
}
})
console.log(max);