1.this
? ??//注意：構(gòu)造函數(shù)不能使用箭頭函數(shù)定義
????function Person(name,age){
? ? ? ? ? ? //在構(gòu)造函數(shù)中围详，this關(guān)鍵字觉至，用于給類添加成員
? ? ? ? ? ? this.name = name
? ? ? ? ? ? this.age = age
? ? ? ? ? ? this.sayHi = function(){
? ? ? ? ? ? ? ? console.log(`大家好！我叫${this.name}咒林，今年${this.age}歲`);
? ? ? ? ? ? }
????}
????//創(chuàng)建對(duì)象熬拒。該對(duì)象會(huì)擁有，類型中定義的所有成員映九。
????let p1 = new Person('張三',20)
????console.log(p1);
????p1.sayHi()
????let p2 = new Person('李四',24)
????console.log(p2);
????p2.sayHi()
????console.log('---------------------');
????let obj1 = {
? ? ? ? ? ? //對(duì)象的兩個(gè)屬性
? ? ? ? ? ? name:'周杰倫',
? ? ? ? ? ? age:20,
? ? ? ? ? ? //對(duì)象的方法
? ? ? ? ? ? sayHi:function(){
? ? ? ? ? ? ? ? //在方法中梦湘，this指向方法的調(diào)用者，誰(shuí)在調(diào)用該方法件甥，this就指向誰(shuí)
? ? ? ? ? ? ? ? //如果一個(gè)方法捌议，不是由對(duì)象調(diào)用執(zhí)行的，而是直接執(zhí)行的引有，那么該方法里面的this
? ? ? ? ? ? ? ? ? 就執(zhí)行window對(duì)象
? ? ? ? ? ? ? ? console.log(`Hi瓣颅！我是${this.name},今年${this.age}歲`);
? ? ? ? ? ? },
? ? ? ? ? ? sayHello:()=>{
? ? ? ? ? ? ? ? //在箭頭函數(shù)中沒(méi)有this，如果在箭頭函數(shù)中使用了this譬正，它會(huì)向上一層函數(shù)中去找this
? ? ? ? ? ? ? ? //如果上一層函數(shù)也是箭頭函數(shù)宫补，或者沒(méi)有上一層函數(shù)了，這個(gè)時(shí)候this就指向
? ? ? ? ? ? ? ? ? window對(duì)象曾我。
? ? ? ? ? ? ? ? console.log(`Hello粉怕！我是${this.name},今年${this.age}歲`);
? ? ? ? ? ? }
????}
????obj1.sayHi()
????let obj2 = {
? ? ? ? ? ? name:'關(guān)曉彤',
? ? ? ? ? ? age:22
????}
????//可以將obj1的函數(shù)傳給obj2，其實(shí)是obj2的sayHi方法抒巢，指向obj1的方法
????obj2.sayHi = obj1.sayHi
????obj2.sayHi()
????//將obj1身上的函數(shù)贫贝，傳給了一個(gè)sayHi變量
????let sayHi = obj1.sayHi
????window.name = '小明' ? ?//設(shè)置window對(duì)象的name屬性
????window.age = 22 ? ? ? ? //設(shè)置window對(duì)象的age屬性
????sayHi()
????console.log('-----------------');
????obj1.sayHello()
????obj2.sayHello = obj1.sayHello
????obj2.sayHello()
????let sayHello = obj1.sayHello
????sayHello()
? ??//var定義的成員（變量和方法）都會(huì)成為window對(duì)象的成員
????var address = '安德門(mén)'
????var showAddress = function(){
? ? ? ? ? ? console.log(`地點(diǎn)在${this.address}`);
? ? ? ? }
????console.log(window);
????showAddress()
????window.showAddress()
????console.log('-----------------');
????// 定義一個(gè)對(duì)象
????let obj1 = {
? ? ? ? ? ? name:'鹿晗',
? ? ? ? ? ? age:30,
? ? ? ? ? ? //自我介紹方法
? ? ? ? ? ? sayHi:function(){
? ? ? ? ? ? ? ? console.log(`Hi!我叫${this.name},今年${this.age}歲`);
? ? ? ? ? ? },
? ? ? ? ? ? showMyFriend(){
? ? ? ? ? ? ? ? // 備份this
? ? ? ? ? ? ? ? //let that = ?this
? ? ? ? ? ? ? ? return {
? ? ? ? ? ? ? ? ? ? name:'關(guān)曉彤',
? ? ? ? ? ? ? ? ? ? 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() ? ?//調(diào)用自我介紹的方法
????obj2.showlh() ? //調(diào)用介紹鹿晗的方法
????// obj1.showMyFriend().sayHi()
2.call apply bind
? ??//call apply bind 更改方法里面this的指向
????let obj1= {
? ? ? ? ? ? name:'李現(xiàn)',
? ? ? ? ? ? age:30,
? ? ? ? ? ? sayHi(a,b){
? ? ? ? ? ? ? ? console.log(`Hi!我叫${this.name}，今年${this.age}歲蛉谜。${a}-$稚晚`);
? ? ? ? ? ? }
????}
????let obj2 = {
? ? ? ? ? ? name:'彭于晏',
? ? ? ? ? ? age:32
????}
????//使用call()改變方法里面，this的指向
????//call()方法的第一個(gè)參數(shù)必須是指定的對(duì)象型诚，方法的原有參數(shù)客燕，挨個(gè)放在后面
????obj1.sayHi.call(obj2,200,100)
????let obj3 = {
? ? ? ? ? ? name:'胡歌',
? ? ? ? ? ? age:35
????}
????//使用apply()，也可以改變方法里面this的指向狰贯，第一個(gè)參是指定的對(duì)象也搓，方法的原有
? ? ? 參數(shù)赏廓，統(tǒng)一放到第二個(gè)數(shù)組參數(shù)中。
????obj1.sayHi.apply(obj3,[200,100])
????let obj4 = {
? ? ? ? ? ? name:'胡軍',
? ? ? ? ? ? age:40
????}
????//使用bind()傍妒，也可以改變方法里面this的指向楚昭，用法給call()一樣
????//call()是直接運(yùn)行方法，bind()是返回新的方法拍顷，然后再重新調(diào)用抚太。
????obj1.sayHi.bind(obj4,200,100)()
3.將一個(gè)對(duì)象轉(zhuǎn)為字符串
? ??//定義一個(gè)對(duì)象
????let obj1 = {}
????//給對(duì)象添加屬性有兩種方式：1.對(duì)象名.屬性名? ? 2.對(duì)象名["屬性名"]
????obj1.name = '張三'
????console.log(obj1);
????obj1['age'] = 20
????console.log(obj1);
????console.log('--------------------');
????//定義一個(gè)手機(jī)對(duì)象
????let phone = {
? ? ? ? ? ? name: "小米10",
? ? ? ? ? ? color: '紅色',
? ? ? ? ? ? size: '1000*200*500',
? ? ? ? ? ? price: '2999'
????}
????//轉(zhuǎn)成下面的字符串
????//"name=小米10&color=紅色&size=1000*200*500&price=2999"
????//for in 循環(huán)，可以循環(huán)出對(duì)象里面的所有的key昔案，(key就是屬性名)
????//方式一：
????let arr = [] ? ?// 定義一個(gè)空數(shù)組
????for(let key in phone){
? ? ? ? ? ? //獲取對(duì)象的屬性值尿贫，可以通過(guò)['屬性名']
? ? ? ? ? ? arr.push(key+'='+phone[key])
????}
????let str1 = arr.join('&')
????console.log(str1);
????//方式二
????//Object.keys(指定的對(duì)象)，該方法可以獲取指定對(duì)象的所有key踏揣，返回值是一個(gè)數(shù)組
????let keys = Object.keys(phone)
????//Object.values(指定的對(duì)象)庆亡，該方法可以獲取指定對(duì)象的所有的value，返回值是一個(gè)數(shù)組
????//let values = Object.values(phone)
????let arr2 = keys.map(function(k){
? ? ? ? ? ? return [k,phone[k]].join('=')
????})
????let str2 = arr2.join('&')
????console.log(str2);
????//方法二：簡(jiǎn)化寫(xiě)法
????let str3 = Object.keys(phone).map(k=>[k,phone[k]].join('=')).join('&')
????console.log(str3);
4.將字符串轉(zhuǎn)為對(duì)象
? ? //調(diào)用kai.js（具體代碼在下文5.封裝js庫(kù)中）
????<script src="./js/kai.js"></script>
? ? <script>
? ??????//定義一個(gè)字符串
????????let str = "name=小米10&color=紅色&size=1000*200*500&price=2999"
????????//轉(zhuǎn)成一個(gè)對(duì)象
????????/* {
? ? ? ? ? ? name: "小米10",
? ? ? ? ? ? color: '紅色',
? ? ? ? ? ? size: '1000*200*500',
? ? ? ? ? ? price: '2999'
????????} */
????????let obj2 = {} ? //定義一個(gè)空對(duì)象
????????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庫(kù)
????//kai.js文件
????let $b = {
? ? ????//將對(duì)象轉(zhuǎn)為字符串
? ? ????objectToStr:(obj,split='&') => Object.keys(obj).map(k=>[k,obj[k]].join('=')).join(split),
? ? ????//將字符串轉(zhuǎn)為對(duì)象
? ? ????strToObject:(str,split='&')=>{
? ? ? ? ????let obj = {} ?//定義一個(gè)空對(duì)象
? ? ? ? ????str.split(split).forEach(r=>{
? ? ? ? ? ? ????let arr = r.split('=')
? ? ? ? ? ? ????obj[arr[0]] = arr[1]
? ? ? ? ????})
? ? ? ? ????return obj
? ? ????}
????}
6.練習(xí)
1.統(tǒng)計(jì)字符串中每個(gè)字符串出現(xiàn)的次數(shù)
? ??//字符串
????let str = "fasdfsadfsegsageqwgersfdhrhdfsergterwhefweteqheq"
????//轉(zhuǎn)成下面格式的對(duì)象
????/*{
? ? ? ? ? ? a:5,
? ? ? ? ? ? b:7,
? ? ? ? ? ? c:9,
? ? ? ? ? ? ...
????} */
????let obj = {}
????// 循環(huán)字符串中的所有的字符串
????for(let i=0;i<str.length;i++){
????????//根據(jù)字符的名稱捞稿，查找對(duì)象中又谋，有沒(méi)有對(duì)應(yīng)的屬性
????????if(obj[str[i]]){
????????????//如果有，對(duì)應(yīng)的屬性值加1
????????????obj[str[i]]++
????????}
????????else{
????????????//如果沒(méi)有娱局，添加這個(gè)屬性彰亥，屬性值賦為1
????????????obj[str[i]] = 1
????????}
????}
????console.log(obj);
????console.log('-----------------------');
2.找出出現(xiàn)次數(shù)最多的字符
????//定義一個(gè)出現(xiàn)次數(shù)最多的字符對(duì)象
????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);
