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()//顶部模块弹出盒子

优点:有命名空间(实现模块化),可拓展(便于继承),避免函数重名,明确语义化。
缺点:代码冗余。
7.js 对象方法类型
对象方法 (js对象需要new才能使用的方法)
//构造函数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()

原型方法 (js对象继承拓展的方法,需要new才能使用的方法)
//构造函数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...in遍历  > Object.keys遍历

尽可能使用 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核心精髓(三)相关推荐

  1. 图解Javascript核心内容

    成为一个高效的JavaScript开发者的秘诀之一就是真正理解这门语言的语义.本文将会通过通俗易懂的图表来解释JavaScript中最基本的核心内容. 随处可见的引用 简单来说,JavaScript中 ...

  2. JavaScript有哪三部分组成?

    在学习web前端技术时,最常见的也是需要最着重学习的就是JavaScript这一方面,工作中也是会经常用到的,那么JavaScript有哪三部分组成呢?来看看下面的详细介绍. JavaScript有哪 ...

  3. JavaScript由哪三部分组成呢?

    在学习web前端技术时,最常见的也是需要最着重学习的就是JavaScript这一方面,工作中也是会经常用到的,那么JavaScript有哪三部分组成呢?来看看下面的详细介绍. JavaScript有哪 ...

  4. JavaScript核心 DOM 和 BOM操作

    JavaScript核心 DOM 和 BOM操作 Web APIs 简介 1. Web APIs 和 JS 基础关联性 1.1 JS 的组成 1.2 JS 基础阶段以及 Web APIs 阶段 JS ...

  5. JavaScript核心知识第二章---事件高级(含大量代码分析)

    前言 ❤️ 一个人有多重的才华,骨子里就会刻上多大重量的谦卑 ❤️ JavaScript核心知识第二章---事件高级 一.JavaScript 事件高级 (1)注册事件(绑定事件) 1.1 注册事件概 ...

  6. JavaScript语言精髓与编程实践(第2版)

    JavaScript语言精髓与编程实践(第2版)  周爱民 著 ISBN 978-7-121-15640-3 2012年3月出版 定价:79元 16开 476页 宣传语:以JavaScript视角看整 ...

  7. JavaScript核心笔记未完

    JavaScript核心 Web API阶段 DOM BOM 操作 js基础是语法阶段 web API阶段是应用 主要是BOM DOM 页面交互功能 1.API 和Web API 1.1API (应用 ...

  8. JavaScript核心1

    JavaScript核心1 Web API阶段 DOM BOM 操作 js基础是语法阶段 web API阶段是应用 主要是BOM DOM 页面交互功能 1.API 和Web API 1.1API (应 ...

  9. javascript核心_只需几分钟即可学习这些核心JavaScript概念

    javascript核心 Sometimes, you just want to learn something quickly. And reading through comprehensive ...

最新文章

  1. Ubuntu远程控制详细步骤流程
  2. mysql 缓存怎么设置_mysql中缓存如何设置
  3. Bootstrap系列 -- 26. 下拉菜单标题
  4. php设计模式之——建造者模式
  5. 【Cocos2d-X(2.x) 游戏开发系列之二】cocos2dx最新2.0.1版本跨平台整合NDK+Xcode编译到Android...
  6. ZK在Eclipse下的环境搭建
  7. ffmpeg添加到环境变量_Windows 10系统下安装FFmpeg教程详解
  8. 【数字图像处理】基于SeetaFace2的人脸检测
  9. FastDFS的安装及上传下载(二)
  10. dcp 1519 linux驱动下载,dcp1519驱动
  11. 释迦牟尼佛和阿弥陀佛有何区别?
  12. 人民日报聚焦绿之韵,树立民族品牌文化之魂
  13. 在服务器上创建文件夹,在服务器上创建文件夹
  14. [转帖]彩色硬盘 关于西数硬盘 企业盘、黑盘、蓝盘、绿盘、红盘的区别
  15. 淘宝天猫整店店铺商品API,店铺商品分类接口代码教程
  16. 磨皮美白搞笑图片处理
  17. CSS兄弟选择器(选择所有兄弟姐妹)
  18. 计算机如何共享电视,怎么让电脑和电视共用一个显示器?
  19. flex布局左边固定,右边自适应,右边内容超出会影响布局
  20. 对象拼接 请求路径_Tensorflow Rust实战下篇[整合actix-web提供http服务]

热门文章

  1. 常见的Java WEB服务器
  2. Windows8应用生命周期 Metro Style Apps Lifecycle
  3. windows phone7---MVVM模式
  4. 没有人会尊重弱者,把弱者当成朋友!人们永远追随强者,永远和强者结盟!
  5. FPGA实验五——多周期移位寄存器
  6. qt程序在Linux下字体乱了,解决linux/Ubuntu下Qt creater 界面程序在编译运行后无法显示中文或中文乱码问题!...
  7. java do while变量无法赋值_Java流是否等同于具有变量赋值的while
  8. Java中 equals和==的区别?
  9. 接口中可以有静态方法吗?
  10. 042_CSS3字体