资讯专栏INFORMATION COLUMN

JS薄弱点记录

kgbook / 2026人阅读

摘要:的值为对象使用构造函数调用函数如果函数调用前使用了关键字,则是调用了构造函数。基于类的基于原型的定义类定义原型对象定义类的构造函数定义对象的构造函数实例化对象将构造函数关联到原型实例化对象注意中引入的概念依然是基于原型的原理。

一、函数定义

JS使用关键字function定义函数,有三种定义方式(有时候也说有三种声明方式)。
1.函数声明

function functionName(parameters) {
     //执行代码
}
注意:函数声明后不会立即执行,在需要的时候调用。

2.函数表达式

 var x = function(a,b) {return a+b;}//匿名函数,函数存储在变量x中
 var z = x(4,3);//通过变量名x来调用匿名函数

3.Function()构造函数/函数对象
即,通过内置的JS函数构造器(Function())定义

var addFunction = new Function("a","b","return a+b");
var res = addFunction(3,4);//调用

注意:new Function("a","b","return a+b")是不对的,会产生如下错误:


☆ 在实际使用中,尽量避免使用new关键字,所以第3种方法不常用。
JavaScript是一种prototypical(原型)类型语言,在创建之初,是为了迎合市场的需要,让人们觉得它和Java是类似的,才引入了new关键字。Javascript本应通过它的Prototypical特性来实现实例化和继承,但new关键字让它变得不伦不类。

二、函数调用

JS函数有4中调用方式,每种方式的不同在于this的初始化。
函数中的代码在函数被调用后执行。
1.作为一个函数调用

function myFunc(a,b) {
    return a + b;
}
myFunc(3,4); //返回20,在浏览器的控制台才能看到该输出

myFunc函数不属于任何对象,但是JS默认它是全局对象。
在HTML中,默认全局对象是HTML页面本身,因此函数myFunc属于HTML页面。
在浏览器中,页面对象是浏览器窗口(Window 对象),即myFunc自动变为window对象。
即,myFunc()和window.myFunc()一样。
注意:这是函数调用的常用方法,但是不是良好的变成习惯。全局变量、方法或者函数容易造成命名冲突的bug。

2.函数作为方法调用
即,将函数定义为对象的方法。

var myObject = {
    firstName:"John",//对象myObject的属性
    lastName: "Doe",//属性
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }//方法
}
myObject.fullName();         // 返回 "John Doe"

fullName方法是一个函数,函数属于对象myObject。
this的值为myObject对象

3.使用构造函数调用函数
如果函数调用前使用了new关键字,则是调用了构造函数。

// 构造函数:
function myFunction(arg1, arg2) {
    this.firstName = arg1;//构造函数中的this关键字没有任何值,其值在函数调用实例化对象(new object)时创建。
    this.lastName  = arg2;
}
 
// 构造函数的调用会创建一个新的对象,新对象会继承构造函数的属性和方法
var x = new myFunction("John","Doe");
x.firstName;                             // 返回 "John"

4.作为函数方法调用函数
JS中,函数是对象,有它的属性和方法
call()和apply()是预定义的函数方法,两个方法可用于调用函数,两个方法的第一个参数必须是对象本身。

function myFunc(a, b) {
    return a * b;
}
myObj = myFunc.call(myObj, 10, 2);     // 返回 20  //call从call的第二个参数传入函数的参数
function myFunc(a, b) {
    return a * b;
}
myArray = [10, 2];
myObj = myFunction.apply(myObj, myArray);  // 返回 20  //apply传入参数数组

在 JavaScript 严格模式(strict mode)下, 在调用函数时第一个参数会成为 this 的值, 即使该参数不是一个对象,比如,传入null和undefined也会保持原样不被转换为window对象。

在 JavaScript 非严格模式(non-strict mode)下, 如果第一个参数的值是 null 或 undefined, 它将使用全局对象替代

三、关键字this的理解

函数在运行时,在函数内部自动生成的一个对象,只能在函数内部使用个。一般来说,JS中,this指向函数执行时的当前对象。
函数没有被自身的对象调用时,this的值就会变成全局对象(浏览器中是浏览器窗口,window对象)
总结:随着函数使用场合的不同,this 的值会发生变化。但是有一个总的原则,那就是this指的是,调用函数的那个对象。

function myFunc(){
   return this;
}
myFunc();//[object Window]

情况1.纯粹的函数调用
全局性调用,this代表全局对象。

var x = 1;
function test() {
    console.log(this.x);
}
test(); //1

情况2.作为对象方法的调用
当函数作为某个对象的方法调用时,this指的就是这个上级对象。

function test() {
    console.log(this.x);
}

var obj = {};
obj.x = 1;
obj.m = test;

obj.m(); //1

情况3.作为构造函数调用
构造函数是什么呢?
——就是通过这个构造函数,可以生成一个新的对象。
此时,this就是这个新的对象。

function test() {
   this.x = 1;
}//构造函数

var obj = new test();//通过构造函数生成一个新对象
obj.x;//1

分析:

var x = 2;//创建一个全局变量

function test() {
   this.x = 1;
}//构造函数

var obj = new test();//通过构造函数生成一个新对象
console.log(obj.x);//1

console.log(x); //2

x的运行结果为2,说明全局变量x的值并没有改变.
情况4.apply调用
apply()是函数的一个方法,作用是改变函数的调用对象。第一个参数就表示改变后的调用这个函数的对象。也就是this指的就是apply的第一个参数。
当apply的参数为空的时候,默认调用全局对象。

var x = 0;
function test() {
   console.log(this.x);
}

var obj = {};
obj.x = 1;
obj.m = test;
obj.m.apply();//0  //this指的是全局变量
obj.m.apply(obj);//1 //this指的是obj
四、数据类型

见文章“JS重要知识点记录(一)”

五、cookie

Cookie用于存储web页面的用户信息。是一些数据,存储于电脑上的文本文件中。
当web服务器向浏览器发送web页面时,在连接关闭后,服务端不会记录用户的信息。而Cookie的作用就是用于解决“如何记录客户端的用户信息”:

当用户访问web页面时,他的名字可以记录在Cookie中。

当用户下一次访问该页面时,可以在cookie中读取用户访问记录。

Cookie以名/值对形式存储,如下所示:

username = Joy Ann

当浏览器从服务器上请求web页面时,属于该页面的Cookie会被添加到该请求中。服务端通过这种方式来获取用户的信息。

六、面向对象(JS的基于原型与Java的基于类的区别)

基于类的面向对象语言:Java和C++,是构建在两个不同实体的概念之上:类和实例。
类(class):一类抽象的事物,定义了这类事物的属性(即方法和变量)
实例(instance):类的一个成员。实例具有父类所有的属性,还可以包括自身独有的属性。
基于原型的语言不存在类和实例的区别:只有对象。

基于类的 基于原型的
1.定义类 1.定义原型对象
2.定义类的构造函数 2.定义对象的构造函数
3.实例化对象 3.将构造函数关联到原型
4.实例化对象

注意:ES6中引入的class概念依然是基于原型的原理。
推荐一篇描述很清晰的文章:https://segmentfault.com/a/11...
小结一下:

1、prototype 就是函数的一个属性
2、prototype属性本身也是一个对象
3、当我们把一个函数Foo()当做构造器来创建一个新的对象f = new Foo()的时候,新对象f就可以访问到Foo()函数的prototype对象中的属性
4、new在创建一个新的对象f的时候,会赋予新对象f一个属性(_proto_)指向构造器的 prototype 属性
5、当访问一个对象的属性(包括方法)时,首先查找这个对象自身有没有该属性,如果没有就查找它的原型(也就是 proto 指向的 prototype 对象),如果还没有就查找原型的原型(prototype 也有它自己的 __proto__,指向更上一级的 prototype 对象),依此类推一直找到 Object 为止
6、一个对象,它有许多属性,其中有一个属性指向了另外一个对象的原型属性;而后者也有一个属性指向了再另外一个对象的原型属性。这就像一条一环套一环的锁链一样,并且从这条锁链的任何一点寻找下去,最后都能找到链条的起点,即 Object;因此,我们也把这种机制称作:原型链。
7、既然 proto 可以访问到对象的原型,那么为什么禁止在实际中使用呢?
这是一个设计上的失误,导致 proto 属性是可以被修改的,同时意味着 JavaScript 的属性查找机制会因此而“瘫痪”,所以强烈的不建议使用它。

七、常用库——JQuery

测试 JavaScript 库(即引用它):


主要的 jQuery 函数: $() 函数(jQuery 函数)
比较使用JS语法和JQuery语法实现同一个功能的区别:

//JS方式
function myFunction()
{
var obj=document.getElementById("h01");
obj.innerHTML="Hello jQuery";
}
onload=myFunction;
//JQuery方式
function myFunction()
{
$("#h01").html("Hello jQuery");
}
$(document).ready(myFunction);//注意JQuery返回的是JQuery对象,因而不能使用HTML DOM对象的属性或方法

JQuery允许链接,即链式语法。

function myFunction() {
     $(#id1).attr("style","color:red").html("hello JQuery")
}
八、常用框架

Vue

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/100653.html

相关文章

  • 前端笔试题面试题记录(下)

    摘要:前言接上篇前端笔试题面试题记录上。默认值,不脱离文档流,,,,等属性不生效。。不脱离文档流,依据自身位置进行偏离,当子元素设置,将依据它进行偏离。。 前言 接上篇前端笔试题面试题记录(上)。趁清明小长假,把上篇剩下的部分也写一下,因为最近比较忙这篇已经拖了很久了。现在刚刚开始银四了,应该还是有些小伙伴在找工作,时间还不算太晚,希望本篇可以帮到这些小伙伴。 个人博客了解一下:obkoro...

    Lin_YT 评论0 收藏0
  • 前端笔试题面试题记录(下)

    摘要:前言接上篇前端笔试题面试题记录上。默认值,不脱离文档流,,,,等属性不生效。。不脱离文档流,依据自身位置进行偏离,当子元素设置,将依据它进行偏离。。 前言 接上篇前端笔试题面试题记录(上)。趁清明小长假,把上篇剩下的部分也写一下,因为最近比较忙这篇已经拖了很久了。现在刚刚开始银四了,应该还是有些小伙伴在找工作,时间还不算太晚,希望本篇可以帮到这些小伙伴。 个人博客了解一下:obkoro...

    suemi 评论0 收藏0
  • 以太坊合约的安全性弱点,你都绕开了吗 III

    摘要:新年前,我们最后来谈一谈以太坊安全性的特点。以太坊使用了一个硬分叉解决了这一问题。合约拥有者利用函数的异常处理和调用栈大小限制进行攻击。结语通过这几期对参考文献的学习,我们看到了一些以太坊合约中设计的弱点。 新年前,我们最后来谈一谈以太坊安全性的特点。 不可能修改的bug 当合约公开在区块链上之后,它就不能去修改了。相应的,合约中出现的任何 bug 也没有机会改正。如果希望能够修改bu...

    qqlcbb 评论0 收藏0
  • 以太坊合约的安全性弱点,你都绕开了吗 III

    摘要:新年前,我们最后来谈一谈以太坊安全性的特点。以太坊使用了一个硬分叉解决了这一问题。合约拥有者利用函数的异常处理和调用栈大小限制进行攻击。结语通过这几期对参考文献的学习,我们看到了一些以太坊合约中设计的弱点。 新年前,我们最后来谈一谈以太坊安全性的特点。 不可能修改的bug 当合约公开在区块链上之后,它就不能去修改了。相应的,合约中出现的任何 bug 也没有机会改正。如果希望能够修改bu...

    gnehc 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<