了解JavaScript核心精髓(三)
1.js判断对象是否存在属性。
hasOwnProperty(‘property’) 判断原型属性是否存在。
"property" in o; 判断原型属性和原型链属性是否存在。
2.js 对象比较
var obj1 ={"emailadr": "sroot@qq.com","emailpas": "1000"};var obj2 ={"emailadr": "sroot@qq.com","emailpas": "1000"};console.log(obj1==obj2) //false ,比较对象的内存地址,不是内容
最简单的方法是直接转成字符串,再进行比较。
3.深拷贝与浅拷贝
浅度拷贝,即复制一个引用类型的指针。
深度拷贝,即复制一个一模一样完整引用类型。
判断浅度拷贝或深度拷贝依据比较两个对象内存地址是否相等,相等就是浅度拷贝,不相等就是深度拷贝。
PS:引用类型指的是对象、数组、函数。
值类型指的是数值、字符串、布尔型、null、undefined。
4.js访问对象属性
//使用.来访问 var myCar = newObject(); myCar.make= "Ford";//使用[]来访问 myCar["make"] = "Ford";
5.js对象继承
//学生类 functionStudent(name,age){this.name =name;this.age =age; }//小学生类 functionPupil(name,age){this.stu=Student;this.stu(name,age); }var s = new Pupil('cww', 10) console.log(s.name)//cww
PS:可以多继承和重写,没有重载,如有同名函数,只执行最后的一个方法。
6.js面向对象。
非对象设计
functionpopBox() {alert('弹出盒子') } popBOX()//不知道是指哪个弹出盒子。
var Top ={popBox:function() {alert('弹出盒子')} } Top.popBox()//顶部模块弹出盒子
//构造函数Person functionPerson() {this.walk = function() {alert('I can walk')} }var p1 = newPerson() p1.walk()
类方法 (js对象不需要new使用的方法)
//构造函数Person var Person ={walk:function() {alert('I can walk')} }//等价于//function Person() {}//Person.walk = function() {//alert('I can walk')//} Person.walk()
//构造函数Person functionPerson(name) {this.name =name } Person.prototype.sayName= function() {alert('my name is:' + this.name) }
Person.prototype.age = 18
var p1 = new Person('sroot') p1.sayName()
PS:原型方法与对象方法比较。
使用原型方法更好,提高js使用内存效率,所有的new对象都共享方法。
原型方法(实例方法)与类方法(静态方法)比较。
静态方法在程序开始时生成内存。实例方法在程序运行中生成内存。
静态方法常见于公用的方法,不需要依赖其他属性,不会被重写。实例方法常见于具体某个对象的方法。
8.函数声明与函数表达式区别
foo1(); //需要初始化 function foo1(){}; //事先定义这个函数,不可以匿名。var foo2 = function(){};//遇到才执行这个函数,可以匿名,函数可以内部调用。 foo2();//必须在foo2函数表达式后面。
9.js跨域问题(不同域名之间的js不能相互操作)
只要是端口,协议,域名不同都算跨域。
(1)使用jsonp。
通过script标签(script标签的src属性是没有跨域的限制的),引入其他域名下的带参数函数,从而读取跨域数据。(仅支持get请求)
<scripttype="text/javascript">//返回函数一定要事先声明,否则jsonp请求返回的函数是UndefinedfunctioncallbackFunction(result) {console.log(result)}//提供jsonp服务的url地址//url后面参数可有可无,建议设置参数,有利于可以动态获取返回数据,告诉后端“我需要一个callbackFunction函数代码”,函数名不是固定的。varurl= 'http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction'varscript=document.createElement('script')script.setAttribute('src', url)document.getElementsByTagName('head')[0].appendChild(script)</script> <!--不建议写死script标签的src--> <!--<script type="text/javascript" src="http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>-->
(2)使用iframe。
创建一个iframe,修改domain,读取iframe里面的数据。
(3)服务端设置跨域请求头。
(4)使用浏览器代理插件。(Allow-Control-Allow-Origin: *插件)
PS:jsonp安全问题:建议请求验证的refer字段或token,否则会出现CSRF攻击漏洞。
10.js判断条件优化
(1)把最常出现的结果排在前面
//var value = xxx if (value === 4) {}else if (value === 3) {}else if (value === 1) {}else if (value === 2) {}else if (value === 0) {}
(2)拆分条件
//var value = xxx if (value <= 4) {if (value > 2) {if (value === 3) {}else if (value === 4) {}}else{if (value === 0) {}else if (value === 1) {}else if (value === 2) {}} }
(3)switch语句
//var value = xxx switch(value){case 1:break;case 2:break;default:}
PS:default关键字后面无需加break关键字。
参数是固定值采用switch语句。
参数是范围值采用if语句。
(4)数据查询
//var value =xxxvar arrRes = [0,1,2,3,4]var results = arrRes[value]
11.js使用别名
function$(id) {returndocument.getElementById(id) }var titleCss = $('title').style titleCss.color= 'red'
节省代码,便于书写。
12:js遍历语句
//for遍历(适用于数组对象) for (var i = 1; 1 < 5; i++) {console.log(i); }//for...in遍历(适用于数组对象) var arrData1=[{name:"foo1"},{name:"foo2"}]for (var key inarrData1) {console.log(arrData1[key].name) }//Array.prototype.map()遍历(适用于数组对象) var arrData2 = [10, 50, 100]; arrData2.map(x=> console.log(x));
PS:性能高到低 for > map > for..in
尽可能使用 for循环,不要使用增强的for循环。
13.js阻止页面内部iframe运行。
if (navigator.appName == 'Microsoft Internet Explorer') {window.frames.document.execCommand('Stop')}else{window.frames.stop() }
14.js禁止外部iframe嵌套
if (window.top != window &&document.referrer) {var a = document.createElement('a')a.href=document.referrervar host =a.hostnamevar endsWith = function(str, suffix) {return str.indexOf(suffix, str.length - suffix.length) !== -1}if (!endsWith(host, '.test.com') || !endsWith(host, '.test2.com')) {top.location.href= 'http://www.test.com'} }
15. 捕获异常
try{ ... }catch(e){var msg = (e.message) ?e.message : e.description;alert(msg); }
转载于:https://www.cnblogs.com/Sroot/p/10064607.html
了解JavaScript核心精髓(三)相关推荐
- 图解Javascript核心内容
成为一个高效的JavaScript开发者的秘诀之一就是真正理解这门语言的语义.本文将会通过通俗易懂的图表来解释JavaScript中最基本的核心内容. 随处可见的引用 简单来说,JavaScript中 ...
- JavaScript有哪三部分组成?
在学习web前端技术时,最常见的也是需要最着重学习的就是JavaScript这一方面,工作中也是会经常用到的,那么JavaScript有哪三部分组成呢?来看看下面的详细介绍. JavaScript有哪 ...
- JavaScript由哪三部分组成呢?
在学习web前端技术时,最常见的也是需要最着重学习的就是JavaScript这一方面,工作中也是会经常用到的,那么JavaScript有哪三部分组成呢?来看看下面的详细介绍. JavaScript有哪 ...
- JavaScript核心 DOM 和 BOM操作
JavaScript核心 DOM 和 BOM操作 Web APIs 简介 1. Web APIs 和 JS 基础关联性 1.1 JS 的组成 1.2 JS 基础阶段以及 Web APIs 阶段 JS ...
- JavaScript核心知识第二章---事件高级(含大量代码分析)
前言 ❤️ 一个人有多重的才华,骨子里就会刻上多大重量的谦卑 ❤️ JavaScript核心知识第二章---事件高级 一.JavaScript 事件高级 (1)注册事件(绑定事件) 1.1 注册事件概 ...
- JavaScript语言精髓与编程实践(第2版)
JavaScript语言精髓与编程实践(第2版) 周爱民 著 ISBN 978-7-121-15640-3 2012年3月出版 定价:79元 16开 476页 宣传语:以JavaScript视角看整 ...
- JavaScript核心笔记未完
JavaScript核心 Web API阶段 DOM BOM 操作 js基础是语法阶段 web API阶段是应用 主要是BOM DOM 页面交互功能 1.API 和Web API 1.1API (应用 ...
- JavaScript核心1
JavaScript核心1 Web API阶段 DOM BOM 操作 js基础是语法阶段 web API阶段是应用 主要是BOM DOM 页面交互功能 1.API 和Web API 1.1API (应 ...
- javascript核心_只需几分钟即可学习这些核心JavaScript概念
javascript核心 Sometimes, you just want to learn something quickly. And reading through comprehensive ...
最新文章
- Ubuntu远程控制详细步骤流程
- mysql 缓存怎么设置_mysql中缓存如何设置
- Bootstrap系列 -- 26. 下拉菜单标题
- php设计模式之——建造者模式
- 【Cocos2d-X(2.x) 游戏开发系列之二】cocos2dx最新2.0.1版本跨平台整合NDK+Xcode编译到Android...
- ZK在Eclipse下的环境搭建
- ffmpeg添加到环境变量_Windows 10系统下安装FFmpeg教程详解
- 【数字图像处理】基于SeetaFace2的人脸检测
- FastDFS的安装及上传下载(二)
- dcp 1519 linux驱动下载,dcp1519驱动
- 释迦牟尼佛和阿弥陀佛有何区别?
- 人民日报聚焦绿之韵,树立民族品牌文化之魂
- 在服务器上创建文件夹,在服务器上创建文件夹
- [转帖]彩色硬盘 关于西数硬盘 企业盘、黑盘、蓝盘、绿盘、红盘的区别
- 淘宝天猫整店店铺商品API,店铺商品分类接口代码教程
- 磨皮美白搞笑图片处理
- CSS兄弟选择器(选择所有兄弟姐妹)
- 计算机如何共享电视,怎么让电脑和电视共用一个显示器?
- flex布局左边固定,右边自适应,右边内容超出会影响布局
- 对象拼接 请求路径_Tensorflow Rust实战下篇[整合actix-web提供http服务]
热门文章
- 常见的Java WEB服务器
- Windows8应用生命周期 Metro Style Apps Lifecycle
- windows phone7---MVVM模式
- 没有人会尊重弱者,把弱者当成朋友!人们永远追随强者,永远和强者结盟!
- FPGA实验五——多周期移位寄存器
- qt程序在Linux下字体乱了,解决linux/Ubuntu下Qt creater 界面程序在编译运行后无法显示中文或中文乱码问题!...
- java do while变量无法赋值_Java流是否等同于具有变量赋值的while
- Java中 equals和==的区别?
- 接口中可以有静态方法吗?
- 042_CSS3字体