this_原型链_继承

this 相关问题

1: apply、call 、bind有什么作用,什么区别?

在JS中,这三者都是用来改变函数的this对象的指向,相似点:

1.都是用来改变函数的this对象的指向的。 2.第一个参数都是this要指向的对象。 3.都可以利用后续参数传参。

不同之处:bind 是返回对应函数,便于稍后调用;apply 、call 则是立即调用 。 举个例子:

var obj = {
    x: 81,
};
 
var foo = {
    getX: function() {
        return this.x;
    }
}
 
console.log(foo.getX.bind(obj)());  //81
console.log(foo.getX.call(obj));    //81
console.log(foo.getX.apply(obj));   //81

三个输出的都是81,但是注意看使用 bind() 方法的,他后面多了对括号。 也就是说,区别是,当你希望改变上下文环境之后并非立即执行,而是回调执行的时候,使用 bind() 方法。而 apply/call 则会立即执行函数。

对于 apply、call 二者而言,作用完全一样,只是接受参数的方式不太一样。例如,有一个函数定义如下:

var func = function(arg1, arg2) {
 
};

就可以通过如下方式来调用:

func.call(this, arg1, arg2);
func.apply(this, [arg1, arg2])

其中 this 是你想指定的上下文,他可以是任何一个 JavaScript 对象(JavaScript 中一切皆对象),call 需要把参数按顺序传递进去,而 apply 则是把参数放在数组里。 JavaScript 中,某个函数的参数数量是不固定的,因此要说适用条件的话,当你的参数是明确知道数量时用 call 。 而不确定的时候用 apply,然后把参数 push 进数组传递进去。当参数数量不确定时,函数内部也可以通过 arguments 这个数组来遍历所有的参数。

2: 以下代码输出什么?

var john = { 
  firstName: "John" 
}
function func() { 
  alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi() //弹出,John: hi!

3: 下面代码输出什么,为什么

func() //弹出window对象,因为在全局作用域下调用,this指向全局对象
function func() { 
  alert(this)
}

4:下面代码输出什么

document.addEventListener('click', function(e){
//绑定事件中的this指向触发事件的元素对象,这里指的是document对象
    console.log(this);
    setTimeout(function(){
//setTimeout中的this指向全局对象window,所以输出window对象
        console.log(this);
    }, 200);
}, false);

上面代码输出document元素对象和window对象

5:下面代码输出什么,为什么

var john = { 
  firstName: "John" 
}

function func() { 
  alert( this.firstName )
}
func.call(john)   //John
//call方法将func方法的this指向变为john对象

6: 以下代码有什么问题,如何修改

var module= {
  bind: function(){
    $btn.on('click', function(){
      console.log(this) /绑定事件中的this指向触发事件的元素对象,这里是$btn对象
      this.showMsg();   //$btn元素没有showMsg方法
    })
  },
  
  showMsg: function(){
    console.log('徐国军');
  }
}

修改:
var module= {
  bind: function(){
    var _this = this;   //保存this,this指向当前对象
    $btn.on('click', function(){
      console.log(this)
      _this.showMsg();   
    })
  },
  
  showMsg: function(){
    console.log('xuguojun');
  }
}

原型链相关问题

7:有如下代码,解释Person、 prototype、proto、p、constructor之间的关联。

function Person(name){
    this.name = name;
}
Person.prototype.sayName = function(){
    console.log('My name is :' + this.name);
}
------------------------------------------------------------------------------------------
Person.prototype = p._proto_,Person.prototype.constructor = Person
var p = new Person("徐国军")
p.sayName();//输出My name is :徐国军

8: 上例中,对对象 p可以这样调用 p.toString()。toString是哪里来的? 画出原型图?并解释什么是原型链。

Paste_Image.png

9:对String做扩展,实现如下方式获取字符串中频率最高的字符

var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因为d 出现了5次
------------------------------------------------------------------------------------------
String.prototype.getMostOften = function() {
    var str = {};
    var  letter;
    for(var i = 0; i < this.length; i++){
        letter = this[i];
        if(!str[letter]){
            str[letter] = 1;
        }
        else{
             str[letter] ++;
        }
    }
    var max = 0;
    var newStr;
    for(var key in str){
        if(str[key] > max){
            max = str[key];
            newStr = key;
        }
    }
    return newStr;
}

var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因为d 出现了5次

10: instanceOf有什么作用?内部逻辑是如何实现的?

instanceof运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。即判断是不是一个对象的实例,是返回 true,不是返回false。

var arr = [1,2,3],
    obj = {name:'xuguojun'};

arr instanceof Array     //true
    //内部逻辑为看实例的 __proto__ 是否等于构造函数的 prototype 。    
arr.__proto__ === Array.prototype //true
    //如果为 true ,则返回结果 true

arr instanceof Object     //true
    //内部逻辑为看实例的 __proto__ 是否为构造函数的 prototype 原型   
arr.__proto__ === Object.prototype //false
    //如果为 false ,则继续看下一层的 __proto__
arr.__proto__.__proto__ === Object.prototype //true
    //如果为 true ,则返回结果 true

obj instanceof Array     //false
    //内部逻辑为看实例的 __proto__ 是否为构造函数的 prototype 原型
obj.__proto__ === Array.prototype //false
    //如果为 false ,则继续看下一层的 __proto__
obj.__proto__.__proto__ === Array.prototype //false
    //如果到最深一层的 __proto__ (最深一层为null)比较还是不相等,则返回 false

11:继承有什么作用?

继承就是子类拥有父类的属性和方法。

作用:继承划分了类的层次性,父类代表的是更一般、更泛化的类,而子类则是更为具体、更为细化;继承是实现代码重用、扩展软件功能的重要手段。子类中与父类完全相同的属性和方法不必重写,因为通过继承,子类会拥有父类的属性和方法,不需要重新去写这些重复的代码,提高了代码的重用性。而只需写出新增或改写的内容,直接给子类添加新的属性和方法,子类就会拥有这些属性和方法,表现出多态化,而父类不会被“污染”,提高了代码的独立性。这就是说子类可以复用父类的内容,不必一切从零开始。

12: 下面两种写法有什么区别?

//方法1
function People(name, sex){
    this.name = name;
    this.sex = sex;
    this.printName = function(){
        console.log(this.name);
    }
}
var p1 = new People('xuguojun', 2)
//这种形式创建的p1本身有name、sex属性和printName方法

//方法2
function Person(name, sex){
    this.name = name;
    this.sex = sex;
}

Person.prototype.printName = function(){
    console.log(this.name);
}
var p1 = new Person('xuguojun', 25);
//这种形式创建的p1本身有name、sex属性,但没有printName方法,但p1能够通过原型链调用Person原型的printName方法。

13: Object.create 有什么作用?兼容性如何?

作用:Object.create() 方法使用指定的原型对象和其属性创建了一个新的对象。

语法:Object.create(proto, [ propertiesObject ])

参数

proto

一个对象,应该是新创建的对象的原型。

propertiesObject

可选。该参数对象是一组属性与值,该对象的属性名称将是新创建的对象的属性名称,值是属性描述符(这些属性描述符的结构与Object.defineProperties() 的第二个参数一样)。注意:该参数对象不能是 undefined ,另外只有该对象中自身拥有的可枚举的属性才有效,也就是说该对象的原型链上属性是无效的。

浏览器兼容性

Paste_Image.png

var me = {
    name: "cg",
    sayName: function(){
        console.log("My name is " + this.name);
    }
}
var p = Object.create(me)
    //以 me 对象为原型,创建了实例 p
p.__proto__ === me //true

image.png

14: hasOwnProperty有什么作用? 如何使用?

hasOwnProperty() 方法会返回一个布尔值,判断一个属性是否是自身的属性,返回 true 或 false

示例:

function  People(name){
    this.name = name
}

People.prototype.sayName = function(){
    console.log("My name is " + this.name);
}

var p = new People("hi")

p.hasOwnProperty("name")  //true
    //name 是 p 自己的属性,所以返回true
p.hasOwnProperty("sayName")  //false
    //sayName 是 p 的原型 __proto__ 里的属性,不是自己的属性,所以返回false

image.png

15:如下代码中call的作用是什么?

function Person(name, sex){
    this.name = name;
    this.sex = sex;
}
function Male(name, sex, age){
    Person.call(this, name, sex);    //这里的 call 有什么作用
    this.age = age;
}
//作用:在Male函数中,调用Person函数,指定Person方法中的this为Male,使Male函数能够执行Person上的初始化代码,实现构造函数继承。

16: 补全代码,实现继承

function Person(name, sex){
    // todo ...
}

Person.prototype.getName = function(){
    // todo ...
};    

function Male(name, sex, age){
   //todo ...
}

//todo ...
Male.prototype.getAge = function(){
    //todo ...
};

var ruoyu = new Male('徐国军', '男', 27);
ruoyu.printName();

补全代码:

function Person(name, sex){
    // todo ...
    this.name = name;
    this.sex = sex;
}

Person.prototype.getName = function(){
    // todo ...
     console.log(this.name);
};    

function Male(name, sex, age){
   //todo ...
    Person.call(this,name,sex);
    this.age = age;
}

//todo ...
Male.prototype = Object.create(Person.prototype);
Male.prototype.constructor = Male;

Male.prototype.getAge = function(){
    //todo ...
console.log(this.age);
};

var ruoyu = new Male('xuguojun', '男', 25);
ruoyu.getName();

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小樱的经验随笔

【Java学习笔记之七】java函数的语法规则总结

函数的概述 发现不断进行加法运算,为了提高代码的复用性,就把该功能独立封装成一段独立的小程序,当下次需要执行加法运算的时候,就可以直接调用这个段小程序即可,那么...

3166
来自专栏Java学习123

Java反射教程(二)

34213
来自专栏土豆专栏

Java面试之数据类型(一)

封装类是引用类型,基本类型在传递参数的时候都是按值传递,而封装类型是按引用传递的(其实引用也是按值传递的,但是传递的是对象的地址)

1242
来自专栏老马说编程

(84) 反射 / 计算机程序的思维逻辑

上节介绍完了并发,从本节开始,我们来探讨Java中的一些动态特性,包括反射、类加载器、注解和动态代理等。利用这些特性,可以以优雅的方式实现一些灵活和通用的功能,...

2238
来自专栏静晴轩

Javascript数组操作

使用JS也算有段时日,然对于数组的使用,总局限于很初级水平,且每每使用总要查下API,或者写个小Demo测试下才算放心,一来二去,浪费不少时间;思虑下,堪能如此...

4098
来自专栏柠檬先生

你不知道的javaScript笔记(3)

对象 对象可以通过两种形式定义: 声明形式和构造形式 声明形式语法: var myObj = {key:value} 构造形式语法: var myObj = n...

1775
来自专栏机器学习算法与Python学习

python基础-数据类型与变量

转载于:廖雪峰的官方网站-python教程 数据类型 计算机顾名思义就是可以做数学计算的机器,因此,计算机程序理所当然地可以处理各种数值。但是,计算机能处理的远...

3437
来自专栏水击三千

浅谈JavaScript的面向对象程序设计(一)

  面向对象的语言有一个标志,他们都有类的概念,通过类可以创建多个具有相同属性和方法的对象。但是JavaScript中没有类的概念,因此JavaScript与其...

2597
来自专栏coding for love

JS原生引用类型解析2-Array类型

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

962
来自专栏猿学

猿学-深入理解Java中的反射机制

JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法;对于任意一个对象,都能够调用它的任意方法和属性;这种动态获取信息以及动态调用对...

140

扫码关注云+社区