js高级小结

最新推荐文章于 2023-05-03 21:15:14 发布
最新推荐文章于 2023-05-03 21:15:14 发布
阅读量119 收藏
点赞数
分类专栏： 前段知识
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/live23/article/details/112735643
版权

01基本对象

var stu={
                name:'zsh',
                age:12,
                eat:function(){
                    console.log(this);
                    // 在基本对象内部this指的是当前的对象。
                    console.log('吃了。。。。')
                }
            }
            stu.eat();
            var stu1={
                name:'ls',
                age:20
            }

02工厂方式创建对象

var stu1=Student('zs',20);
var stu2=Student('ls',13);
var tea1=Teacher('aa',34);

03构造函数方式

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

04构造函数应用

 var flight=new Product('这是无人机',5999,['白色','渐变色','银色']);
            console.log(flight);
            // 直接通过id名可以选择标签
            title.innerHTML=flight.title;
            btn.onclick=function(){
                flight.buy();
                // 页面跳转
                location.href="03构造函数方式.html";
            }
            flight.buy();

05构造函数+原型方式

function Product(title,price){
                this.title=title;
                this.price=price;
                // this.buy=function(){
                //     counsole.log('hello')
                // }
            }
            var flight=new Product('无人机',4999);
            var mz=new Product('口红',399);
            // 存储的地址不一样。执行的功能一样。
            // 每次实例化对象的时候，都会生成一个buy方法。造成资源的浪费
            // console.log(flight.buy==mz.buy);

            // 每一个构造函数，都有一个prototype属性/对象，该属性的所有方法和属性都能被构造函数继承。
            Product.prototype.buy=function(){
                console.log('购买了。。。。')
            }
            // 如果实例对象没有自己对应的方法，会去构造函数的prototype内部寻找。如果能找到，就会执行该方法。
            console.log(flight.buy==mz.buy);
            // 我们一般会把属性放置在构造函数内部，方法类的放在原型里面。这种方法封装的就称为构造函数+原型方式

06构造函数相关概念

// this在普通位置一般指向的是window
			console.log(this);
			// 构造函数的首字母一般大写
			function Product(title,price){
                this.title=title;
                this.price=price;
                this.joinCar=function(){
                	console.log(this.title);
                }
            }
            // 两个this指的都是实例化对象
            Product.prototype.buy=function(){
            	console.log(this);
                console.log('购买了。。。。'+this.title);
            }
            var f=new Product('无人机',5999);
            f.buy();
            f.joinCar();

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

            f.__proto__.buy=function(){
            	console.log('您确认购买'+this.title);
            }

            var m=new Product('口红',299);
            m.buy();

            var arr=new Array(10,20,30);

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

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

07constructor

function Product(title,price){
                this.title=title;
                this.price=price;
                this.joinCar=function(){
                	console.log(this.title);
                }
            }
            // Product.prototype.buy=function(){
            // 	console.log(this);
            //     console.log('购买了。。。。'+this.title);
            // }

            // 相当于重写了Product.prototype 丢失了constructor属性
            Product.prototype={
            	buy:function(){
            		console.log('买');
            	},
            	joinCar:function(){
            		console.log('加购物车');
            	}
            }
            var p=new Product('口红',399);
            console.log(p.constructor);
            console.log(Product.prototype);

08构造函数使用场景

html代码

<h3 id="title">标题</h3><br>
		京东价<p id="price"></p><br>
		选择颜色<p id="color"></p>

		<script src="common.js"></script>

common.js代码

// 创建函数 把对象封装起来
 function Student(name,age){
    return {
        name:name,
        age:age,
        eat:function(){
            console.log(this);
            // 在基本对象内部this指的是当前的对象。
            console.log('吃了。。。。')
        }
    }
}
function Teacher(name,age){
    return {
        name:name,
        age:age
    }
}
function Product(title,price,color){
    this.title=title;
    this.price=price;
    this.color=color;
    
}

Product.prototype.buy=function(){
    console.log('请问您需要购买'+this.title+'?');
}

js代码

var p=new Product('kouhong',2199,['粉色','白色']);
			title.innerHTML=p.title;
			price.innerHTML=p.price;
			for(var i in p.color){
				console.log(i);
				color.innerHTML+=p.color[i];
			}

09constructor

function Product(name){
                this.name=name;
            }
            Product.prototype={
                // 重写以后丢失prototype属性，可以自己增加。
                constructor:Product,
                buy:function(){
                    alert('您确定了')
                }
            }
            var p=new Product('手机')
            console.log(Product.prototype);
            console.log(p.constructor==Product);

10原型链

// 原型链：当从一个对象那里调取属性或方法时，如果该对象自身不存在这样的属性或者方法，
// 就会去关联的prorotype那里寻找，如果prototype没有。就会去prototype关联的prototype那里寻找。如果还没有，会一直向上寻找
// 直到prototype....prototype..为null。从而形成了原型链(根本上来说就是继承)
// a.isPrototypeOf(b) 判断a是否存在b的原型链中
function Product(name){
                this.name=name;
            }
            console.log(Product.prototype.__proto__==Object.prototype);
            console.log(Object.prototype.__proto__);
            var p=new Product('手机');
            console.log(Product.prototype.isPrototypeOf(p));
            console.log(Object.prototype.isPrototypeOf(p));
var person={
				name:'zs'
			}
			// 通过person创建对象student。类似于继承
			var student=Object.create(person);
			student.zid='101';
			var teacher=Object.create(student);
			teacher.zid='001';

			// 自身不能说存在自身原型链中
			console.log(teacher.isPrototypeOf(teacher));
			console.log(student.isPrototypeOf(teacher));
			console.log(Object.prototype.isPrototypeOf(person));
			console.log(person.isPrototypeOf(teacher));

			// 如果一个对象既有自有属性，又可以继承。自有属性为准
			// zid是teacher继承过来的
			console.log(teacher.zid);
			// a.hasOwnProperty(b)判断b属性是a自有的还是继承过来的
			console.log(teacher.hasOwnProperty('zid'));

11get和set

var circle={
				r:20,
				// get获取值 get 变量名  
				// set设置值 set 变量名
				get acr(){
					return Math.PI*this.r*this.r;
				},
				set acr(value){
					this.r=value;
				}
			}
			// 如果是赋值，自动调用set方法
			circle.acr=100;

			// 如果是获取值，自动调用get方法
			console.log(circle.acr);

12属性特征

var stu={
				name:'zs',
				age:12
			}
			// 正常赋值，属性可以直接修改
			stu.name='小明';
			// 属性可以被遍历出来
			// for (var i in stu){
			// 	console.log(i)
			// }

			// 一般特殊情况才这样使用。
			// 设置属性的时候，可以配置属性特征
			Object.defineProperty(stu,'password',{
				value:123,
				// 是否可被修改
				writeable:false,
				// 是否可以被遍历
				enumerable:false,
				//是否可以被重新配置 
				configurable:false
			})
			// 修改不成功，但是不会报错。writeable false
			stu.password=456;
			console.log(stu.password);
			// 不能被遍历 enumerable是false
			for (var i in stu){
				console.log(stu)
			}

			// 不能被重新配置 configurable是false
			// Object.defineProperty(stu,'password',{
			// 	value:123,
			// 	// 是否可被修改
			// 	writeable:true,
			// 	// 是否可以被遍历
			// 	enumrable:true,
			// 	//是否可以被重新配置 
			// 	configurable:true
			// })

13变量提升

/变量声明

			// 如果一个变量声明，会把声明提升到整个作用域的最前面，赋值还是在原来的位置
			// console.log(a);
			// var a=10;
			// 等价于
			// var a;
			// console.log(a);
			// a=10;


			// 如果变量没有声明，作用域是赋值以后的区域
			//报错a  没有声明在赋值之前没有办法直接使用
			// console.log(a)
			// a=10;

			// 通过该方法定义函数，会把整个函数提升到作用域最前面。
			// add()
			// function add(){
			// 	console.log(111)
			// }


			// 如果通过该方法定义函数，只是把变量的定义提升到作用域最前面
			// 报错 add不是一个函数
			// add()
			// var add=function(){
			// 	console.log(111);
			// }


			// var a=10;
			// function add(){
			// 	// 变量提升，会把变量声明提升到整个作用域最前面
			// 	// js中只有函数的作用域，变量的作用域，是向上寻找距离其最近的开始的函数的{ 变量的作用范围就是该{以内。
			// 	// console.log(a);
			// 	// var a=100;
			// 	// 等价于
			// 	var a;
			// 	console.log(a);
			// 	a=100;

			// }
			// add()


			// function add(){
			// 	var a=100;
			// }
			// add();
			// console.log(a);  报错  a的作用域是函数以内


			function add(){
				a=100;
			}
			// add(); 如果执行函数相当于给a赋值。a没有声明，作用域是赋值以后都可以使用  
			// 如果不执行函数，相当于不会执行赋值语句.a会报错
			console.log(a);

14作用域和作用域链

作用域：在js中只有函数的作用域，在函数内部声明的变量，才能称为局部变量
                全局和局部只是相对来说
作用域链：在某个作用域内使用变量的时候，首先会在该作用域内寻找该变量，如果没有
                会一直向上寻找。这样的一种链式关系就是作用域链。其实指的就是变量的就近原则。

15原型链图

16this指向问题

this指向问题：
                    事件函数中：指向事件源
                    普通函数中：指向的是window对象
                    构造函数中：指向的是实例对象
                    普通对象中：指向的是当前对象

btn.onclick=function(){
				console.log(this)
			}
			function Product(){
				this.buy=function(){
					console.log(this)
				}
			}
			var p=new Product();
			p.buy();

			var stu={
				name:'zs',
				eat:function(){
					console.log(this)
				}
			}
			stu.eat();
			function add(){
				console.log(this)
			}
			add()

17call apply和bind

this指向问题：
                    普通函数中：指向的是window对象
                call apply和bind都可以用来修改this指向。只是使用方式不一样

var stu={
				name:'zs',
				age:12,
				weight:200
			}
			function add(a,b){
				console.log(a,b,this.age)
			}
			// add(1,2);

			// fn.call(所要指向的对象,参数1,参数2,...) 调用fn函数。修改this指向
			add.call(stu,1,3);

			// fn.call(所要指向的对象,[参数1,参数2,...]) 调用fn函数。修改this指向
			add.apply(stu,[1,2]);

			// bind不会直接调用函数 返回一个新的函数 修改了this指向
			var fn=add.bind(stu,1,2);
			fn();

18变量在内存中的存储

基本数据类型：在内存中以值的形式存在。 字符串、数值、布尔类型、null undefined

 复合数据类型：在内存中以地址的形式存在。 对象  

var a=10;
			var b=a;
			a=100;
			console.log(b);


			var stu={
				name:'zs'
			}

			// 传递的是地址
			var stu1=stu;
			stu.name='ls';
			console.log(stu1.name);
		</script>

19深拷贝与浅拷贝

浅拷贝：直接把对象的属性一一赋值，不考虑属性值类型，如果属性值为对象的时候，只要修改一个，其余对象对应数据都会改变

var stu1={};
			stu1.name=stu.name;
			stu1.age=stu.age;
			stu1.hobby=stu.hobby;
			stu1.score=stu.score;
			stu.name='张三';
			stu.hobby[0]="弹吉他";
			console.log(stu1);

深拷贝：如果对象的属性值为基本数据类型，直接拷贝。如果对象属性对应的值对象，需要解析对象，再去拷贝

var stu={
				name:'zs',
				age:14,
				hobby:['唱歌','跳舞'],
				score:{
					math:89,
					english:100,
					lizong:[100,100,200]
				}
			}
var stu1={

			}
			stu1.name=stu.name;
			stu1.age=stu.age;
			stu1.hobby=[];
			stu1.hobby[0]=stu.hobby[0];
			stu1.hobby[1]=stu.hobby[1];
			stu1.score={};
			stu1.score.math=stu.score.math;
			stu1.score.english=stu.score.english;
			var stu2={};
			// 快速实现深拷贝(函数递归调用)
			function deepCopy(a,b){
				for(var key in a){
					var i=a[key];
					if(i instanceof Array){
						b[key]={};
						deepCopy(i,b[key]);
					}else if(i instanceof Object){
						b[key]={};
						deepCopy(i,b[key]);
					}else{
						b[key]=i;
					}
				}
			}
			deepCopy(stu,stu2);
			console.log(stu2);
			// 只要调用deepCopy即可实现深拷贝

20高阶函数

// 函数作为函数的实参。高阶函数
			function add(time,color){
				setTimeout(function(){
					color();
				},time)
			}

			add(1000,function(){
				txt.style.color='red';
			})

			add(2000,function(){
				txt.style.background='lime';
			})


			$('button').click(function(){})

21闭包

闭包：扩大了变量作用域

闭包：缩小变量作用域，防止变量污染

html：

<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>

js：

var btns=document.getElementsByTagName('button');
			for(var i=0;i<btns.length;i++){
				// btns[i].onclick=function(){
				// 	// i全局变量，点击的时候i的值已经是btns.length;
				// 	tags[i].style.background='lime';
				// }

				(function(b){
					btns[b].onclick=function(){
						// i全局变量，点击的时候i的值已经是btns.length;
						btns[b].style.background='lime';
					}
				})(i);
			}

			//计数器
			// 1、可以在函数的外部访问到函数内部的局部变量
			// 2、让这些变量始终保存在内存中，不会随着函数的结束而自动销毁
			var add=(function(){
				var count=0;
				return function(){
					return count+=1;
				}
			})()
			console.log(add);
			console.log(add());
			console.log(add());
			console.log(add());
			console.log(add());

 

自调用函数 ;( function(){})(); 前后都需要有结尾;

(function(){
				// 放置的是一段有特殊功能的代码
				var m=10;
			})();
			
			console.log(m)

 

 

 

 

 

 

 

live23
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS 高级+面试题
m0_61044901的博客
06-06 1023
JS 高级+面试题
JS数组的高级使用方法示例小结
11-21
本文将深入探讨JS数组的高级使用方法，包括遍历、获取长度、添加和删除元素、排序以及生成随机数等。 1. 遍历数组 在JavaScript中，有两种常见的遍历数组的方式： - `for...in`循环：这种循环适用于遍历对象的属性...
JavaScript的原型方法
SanPhantom的博客
08-13 775
JavaScript的原型方法 1、构造函数 function Person(name, age, sex){ this.name = name; this.age = age; this.sex = sex; this.eat = function(){ console.log("我喜欢吃火锅"); } } 以上为一个构造函数...
JS高级技巧学习小结
学习技术交流的博客
04-01 348
JS高级技巧学习小结
Javascript高级+小案例
qq_45638271的博客
04-11 2984
BOM：Windows对象 目标 掌握Windows对象的基本使用 路径 BOM介绍 Window对象 BOM介绍 BOM是Browser Object Model的缩写，简称浏览器对象模型，是将使用的浏览器抽象成对象模型。 简单理解：把整个浏览器当做一个对象来处理。 BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。 Screen对象， Screen 对象中存放着有关显示浏览器屏幕的信息。 Navigator对象，包含的属性描述了正在使用的浏览器(当前浏览器的相关
JS高级程序设计第二章：HTML 中的 JavaScript小结
m0_61703554的博客
07-01 139
1.推荐使用外部js文件的原因 1.1：可维护性-JavaScript 代码如果分散到很多 HTML 页面，会导致维护困难。而用一个目录保存所有js文件则更容易维护； 1.2：缓存浏览器会根据特定的设置缓存所有外部js文件，这意味着如果多个页面使用同一个js文件只需要下载一次，页面会更快；2.在浏览器配置外部js文件时要重点考虑他们会占用多少带宽；3.script标签的私有属性defer，立即下载，延迟执行，但是支持H5的浏览器会忽略此属性；4.noscript标签当浏览器不
2018年中高级前端面试题目小结
qq_31965515的博客
10-30 2664
2018年中高级前端面试题目小结 前言 关于前端面试，及面试题目，我之前有很多文章总结过，可以在右侧搜索面试，进行查找。其实面试中可以问的问题很多，最近几年，我也面试过很多工作2-4年的前端，我一般会抓住他们做的项目，进行更详细的追问。所以，初中级前端面试的时候，除了掌握基础知识之外，项目中用到的技术要理清楚，假如你项目中用到的技术，问的时候却一问三不知，那么，基本上就会pass掉了。针对比较...
JS高级程序设计第一章：什么是 JavaScript小结
m0_61703554的博客
06-30 229
JS高级程序设计第一章：什么是 JavaScript小结
【JS】Javascript高级编程读书小结(第一章)
qq_35724512的博客
01-14 117
小结 JavaScript 是一门用来与网页交互的脚本语言，包含以下三个组成部分。 1 ECMAScript：由 ECMA-262 定义并提供核心功能。 2 文档对象模型（DOM）：提供与网页内容交互的方法和接口。 3 浏览器对象模型（BOM）：提供与浏览器交互的方法和接口。 JavaScript 的这三个部分得到了五大 Web 浏览器（IE、Firefox、Chrome、Safari 和 Opera）不同程度 的支持。所有浏览器基本上对 ES5（ECMAScript 5）提供了完善的支持，而对 ES
各章小结
13-c的博客
01-30 224
转自 w3cschool 和 JavaScript高级程序设计。
JavaScript高级程序设计——读书笔记
最新发布
淡水瑜的博客
05-03 1594
想要全面理解和掌握JavaScript，关键在于弄清楚它的本质、历史、局限性。ECMAScriptECMAScript（简称ES）是一种用于编写Web浏览器脚本语言的标准，它定义了JavaScript语言的核心规范。它由Ecma International 标准化组织负责管理和更新。JavaScript是ECMAScript标准的一种实现，其他还有JScript和ActionScript等。ECMAScript的目标是提供一种可以跨平台、可靠、高效、强大的脚本语言。
JavaScript jquery及AJAX小结
01-19
其实在学习之前，就已经用上了js，jquery和ajax，不过当时不清楚这些的区别，就全都当成js来看，然后别人一说jquery，ajax都觉得好像很高级，等到自己学习的时候，倒是对这些更清楚了一点，下面就来写一下我的总结。...
JavaScript事件学习小结(二)js事件处理程序
11-25
在JavaScript事件学习小结(二)中，主要探讨的是如何处理这些事件，即事件处理程序。事件处理程序是当特定事件发生时执行的函数，如用户点击按钮或页面加载完成。以下是关于JavaScript事件处理程序的详细解释： 1. *...
2020前端面试题（附带答案）
热门推荐
live23的博客
12-06 1万+
这些面试题是本人在网上收集的题型及答案，以及自己的一些见解希望对大家有些帮助。 css的居中方式 答： 1.1 内联元素水平居中 利用text-align: center可以实现在块级元素内部的内联元素水平居中。此方法对内联元素(inline), 内联块(inline-block), 内联表(inline-table),inline-flex元素水平居中都有效。 代码如下： center-text{ Text-aling:center; } 1.2 块级元素水平居中 通过把固定宽度...
前端面试典型例题（包括一些自己的小练习）
live23的博客
12-06 1296
1、下面程序的执行结果是什么？请分析原因? function f({ x = 10 } = {}, { y } = { y: 10 }) { console.log( x + " " + y +"\n"); } 根据es6提供的参数值默认原理，undefined就是空。得到以下值。 f(); // 10 10 f( undefined, undefined ); // 10 10 f( {}, undefined ); // 10 10 f( {}, {} ); // 10 undef...
在vue中实现修改子组件的数据，父组件的数据也跟着变化
live23的博客
02-01 809
在vue中如果在不使用vuex的情况下，实现子组件给父组件传参方法如下： html代码： <div id="app"> {{num}} <v-header :a='num'></v-header> <!-- <button type="button" @click="change()">按钮</button> --> </div> <template id="header">
前端典型例题
live23的博客
12-06 220
1、var和let区别？ let向上寻找距离变量最近的开始的函数的{} let没有变量提升 let不能重复声明 let具有暂时性死区的情况 2、分析代码执行结果？ var a=123; if(true){ a='zsh'; let a; } 报错 let的暂时性死区 3、补全代码 var person={ name:'zs', age:12 } let str=`用户的姓名为${person.name} ,年龄是${person.age}`; 结果呈现：用户的姓名.
2021-01-26
live23的博客
01-26 179
vue实现微博发布功能 主要就是要操控数据，vue的想要改变任何东西，首先第一点要记住我们改变的永远是变量，而不是去操作标签。 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> </style> <script src=".
掌握jQuery的Ajax基础与高级用法
JQuery操作Ajax方法小结 在jQuery库中，Ajax（Asynchronous JavaScript and XML）是一种在后台与服务器异步交换数据的技术，使得网页无需刷新页面即可更新部分数据。Ajax的核心方法是`$.ajax()`，它是jQuery实现...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值